Vue父子组件之间的通信
创建两个全局组件
1.Parent 2. Child
父组件往子组件通信
- 现在父组件中绑定自定义属性
- 在子组件中使用props接收父组件传递的数据
- 在子组件中可以任意使用
Vue.component('Child',{
template:`<div>
<p>我是子组件</p>
<input type="text" v-model="childValue">
<p>{{childValue}}</p>
</div>`
//子组件通过props接受父组件传递过来的数据
props:['childValue']
});
Vue.component('Parent',{
data(){
return {
msg:"你好"
}
},
template:`<div>
//自定义属性将父组件的数据传递给子组件
<Child :childValue="msg"></Child>
</div>`
});
子组件往父组件通信
- 在父组件中绑定自定义事件
- 在子组件中触发原生事件,在函数中用$emit触发
Vue.component('Child',{
data(){
return {
msg:"你好"
}
},
template:`<div>
<p>我是子组件</p>
<input type="text" v-model="msg" @input="clickValue(msg)">
</div>`,
methods:{
//在函数中,自定义事件一定要通过this.$emit()触发,
//$emit(自定义事件名,消息)
clickValue(val){
this.$emit('clickValue',val);
}
},
});
Vue.component('Parent',{
template:`<div>
<Child @clickValue="clickValue"></Child>
</div>`,
methods:{
clickValue(val){
console.log(val);
}
}
})