1. 父组件向子组件传值
1.1 先在子组件里面定义好要传递未知,用变量定义好名称,然后将要传递的数据类型定义好:
子组件:
代码如下:
<template>
<div class="navapp">
<div class="navbar">
<div class="navleft" @click="$router.go(-1)">
<img src="../assets/images/public/back.png" alt="" v-if="srcimg == true" /> <span>{{ navback }}</span>
</div>
<div class="navcenter">{{ navcenter }}</div>
<div class="navright">{{ navright }}</div>
</div>
</div>
</template>
<script>
export default {
name: "NavBar",
props: {
srcimg: Boolean,
navback:String,
navcenter:String,
navright:String
},
};
</script>
1.2 首先先将子组件通过improt给导入到父组件页面里,然后,在components中注册一下,最后就能直接使用,传值给子组件了。
父组件:
代码如下:
<template>
<div class="home">
<NavBar
:srcimg="true"
:navback="back"
navcenter="银选"
navright="右边"
></NavBar>
</div>
</template>
<script>
import NavBar from "@/components/NavBar.vue";
export default {
name: "Home",
components: {
NavBar,
},
data() {
return {
back:'返回'
};
}
};
</script>