vue 父子间通信 总结

组件之间通信

组件是 vue.js 强大的功能，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
根据组件传递数据的方向不同，分为父组件向子组件传值，子组件向父组件传值。
这两种传值方向，是通过props、$ref和 $emit 来实现的。

父组件向子组件传值（父传子）

props

• 子组件的props选项能够接收来自父组件数据。
• props是单向绑定的，即只能父组件向子组件传递，不能反向。
• 传递的方式也分为两种：一种为静态数据，一种为动态传递

父组件

子组件

子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

实现的效果图

父组件输入密码

子组件接收数据

子组件向父组件传值（子传父）

$emit( eventName, […args] )

• $emit绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
• 也就是子组件绑定父组件中的方法，通过回调，将数据传递给父组件。

子组件

    methods: {
        handleClick () {
            // 向父组件传值
            this.$emit('getChild', this.message);
        }
    }

父组件

      // 调用方法,接收传值
      getSuccess (value) {
        console.log(value);
            this.$message({
                message: value,
                type: 'success'
            });
      },

可以定义一个事件来触发响应的$emit，使父组件可以知道有事件改变,进而接收对应的参数。

兄弟组件之间的传值

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;
原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线。

子组件

import Child from './Child';
import Brother from './Borther';

methods: {
    handleClick () {
        // 向父组件传值
        this.$emit('getChild', this.message);

        // 兄弟组件传值
        Brother.$emit('getChild', this.message);
        
    }
}

兄弟组件接收方式与父组件接收方式一样。

父组件调用子组件方法并传值

父组件

            // 调用子组件的方法
            this.$refs.child.getMessage(this.detail);

• child为子组件在父组件的名称，保持一致。
• getMessage(this.detail) 中，getMessage为子组件中的方法，this.detail为父组件传给子组件方法的数据。
• 实现父组件给子组件传参，并调用方法。

总结

1. 父子组件通信需要一定的媒介，也就是中间站。
2. 调用方法进行传值。