Vue中父子组件的通信方式
一、Props + $emit
Props:父传子
父组件Parent.vue:
<Child :message="message" @changeMessage="message = $event" />
$emit:子传父
子组件Child.vue:
this.$emit('changeMessage','Bye')
在子组件里用$emit自定义一个事件并传参,父组件里监听事件
二、回调函数(callBack)
父传子:将父组件里定义的method作为props传入子组件
父组件Parent.vue:
<Child :changeMsgFn="changeMessage">
methods:
changeMessage(){
this.message = 'Bye'
}
子组件Child.vue:
<button @click="changeMsgFn">
props:['changeMsgFn']
三、$parent + $children
可以获取父组件实例和子组件实例的集合
父组件Parent.vue:
this.$children[0].number = 50
子组件Child.vue:
getParentMessage(){
return this.$parent.massage
}
四、provide + inject
父组件Parent.vue:
export default{
provide:{
message:'我是父组件里通过provide提供的信息'
}
}
子组件Child.vue:
export default{
inject:['message']
}
五、$attrs + $listeners
$attrs 包含了从父组件传过来的所有props属性
适用于多级通信
父组件Parent.vue:
<Child :name="name" :age="age"/>
子组件Child.vue:
<GrandChild v-bind="$attrs" />
孙子组件GrandChild
<p>姓名:{{$attrs.name}}</p>
<p>年龄:{{$attrs.age}}</p>
$listeners包含了父组件监听的左右事件
父组件Parent.vue:
<Child :name="name" :age="age" @changeNameFn="changeName"/>
子组件Child.vue:
<button @click="$listeners.changeNameFn"></button>
六、ref 获取组件实例
父组件Parent.vue:
<Child ref="childComp"/>
<button @click="changeName"></button>
changeName(){
console.log(this.$refs.childComp.age);
this.$refs.childComp.changeAge()
}
子组件Child.vue:
data(){
return{
age:20
}
},
methods(){
changeName(){
this.age=15
}
}