Vue中父子组件的六种通信方式

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
    }
}