vue中子组件和父组件之间的对象传递
父组件是index.vue,子组件是addressToast.vue父组件传递给子组件父组件代码代码://父组件import引入子组件(子组件路径要对)import addressToast from '@/components/addressToast'//在component中加载组件components: {addressToast},// 可以在...
·
父组件是index.vue,子组件是addressToast.vue
- 父组件传递给子组件
父组件代码代码:
// 父组件import引入子组件(子组件路径要对)
import addressToast from '@/components/addressToast'
// 在component中加载组件
components: {
addressToast
},
// 可以在index.vue页面使用addressToast.vue了(字母大写需要换成-符号使用)
<address-toast v-bind:updateAddress="this.updateAddress" ></address-toast>
以上就把父组件中定义的updateAddress对象传递给子组件了
子组件代码(接受父组件的值)
// addressToast.vue,接受index.vue传过来的updateAddress值
props: ['updateAddress'],
// prop也可以有另外一种写法,指明接受的数据类型,如String,Number等,
// 像props:{message:{type: String,require:true}},如果是数组或者json对象还需要默认一个返回函数
子组件可以使用updateAddress这个值了
- 子组件传递给父组件
子组件中定义了info对象,在需要的地方使用emit传值就行,比如addressToast组件中有个fun方法
fun () {
this.$emit('info','我是子组件传递给父组件的值')
}
父组件监听这个事件,父组件使用子组件改为
// 父组件代码
<address-toast @info="show" v-bind:updateAddress="this.updateAddress" ></address-toast>
// 父组件show方法
show(data){
console.log(date)
}
// data是传递过来的值
更多推荐
已为社区贡献3条内容
所有评论(0)