您的位置：首页 > 产品设计 > UI/UE

Vue笔记2 父子组件的数据通信

2017-09-06 09:57 981 查看
使用vue封装的组件，在调用时要与父组件进行数据通信，主要有两种方式：

1.使用props，将父组件的数据传递给子组件

//子组件,设置parentMsg接收子组件的数据
Vue.component('my-child',{
props:['parentMsg'],
});


//父组件,绑定parentMsg属性
<parent id="app">
<my-child :parent-msg="msg"></my-child>
</parent>
new Vue({
el:'#app',
data:{
msg:'data to child',
}
})


2.子组件可以注册事件，并主动触发，父组件对子组件监听，触发时进行数据操作

//子组件
Vue.component("my-child",{
template:`<div>
<a href="#" @click="toPare"></a>
</div>`,
methods:{
toPare:function(){
//触发toPare事件，data是传递的参数
this.$emit('toPare',data);
}
}
});


//父组件，绑定事件
<parent id="app">
<my-child @toPare="childEvent"></my-child>
</parent>
new Vue({
el:'#app',
methods:{
childEvent:function(data){
console.log(data);
},
}
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航