Vue中父子通信问题

众所周知,Vue的一个核心便是组件化,说明组件的使用是必不可少,而使用组件的过程中,就必然会需要使得组件之间相互通信.实现组件通信方法最基础,也是最简单的便是props和$emit.

父传子方法

props:翻译为"属性",使用方法是先在子组件内部定义一个属性,用来接收父组件的传值,通过这样就可以实现父组件向子组件通信.

子传父方法

$emit:该方法可用来实现子向父通信.写在子组件的事件内部，如下:其中"myevent"则在父组件中绑定需要操作的事件:

    //  子组件向上传递
     handleClick(){
                this.$emit("myevent");
            }

    //  父组件接受信息，并作出相应的事件
    @myevent="handleEvent"
    
    //  js
    handleEvent(){
       console.log("父组件接受成功");
    }
 

在handleEvent()方法中写需要的操作.以上就实现了通过点击子组件来操作父组件,完成了子向父通信.

实际问题

以上只是对组件通信做一个简单介绍,在实际开发中碰到过一个场景,

• 简化之后的功能便是在父组件中点击按钮,打开子组件中element ui的抽屉组件,子组件内部也可以控制抽屉组件的开关.该功能需要的不止是父子通信,还需要将通信的内容进行双向绑定,使得父子组件均可以控制该数据.

在Vue官网中也找到了两种解决方法,如下图：

#sync语法糖

#model

解决

对比两个方法之后,决定以.sync的方法解决这个问题,而使用方法则是：

// 1.子组件定义接收参数
props: ["dialog"],

// 2.父组件中定义data值,并传递
data() {
	return {
            dialog_fa: false, 
        }
 }
 
<son :dialog.sync="dialog_fa" ></son>

// 3.子组件定义data暂存接收的参数
data() {
	return {
                dialog_let: this.dialog, 
	}
 }
 
 // 4.子组件中发送事件改变参数，并向上传递至父组件
 handleEdit() {
	this.$emit("update:dialog", false);
	this.dialog_let = true;
}

以上