vue组件之间的通信

一、父子组件通信

props 和 $emit

props和$emit使我们日常开发中最常用的组件通信方式。

父组件通过绑定属性来向子组件传递数据，子组件通过props属性来获取对用的数据；

子组件则是通过派发$emit事件将数据传递到父组件中

//父组件
<child :meg="msg" @updateParentMsg="updateParentMsg"  />

data(){
    return{
        msg:"我是父组件"
    }
},
methods: {
    updateParentMsg(msg) {
      this.msg = msg
    }
}


//子组件
<button @click="change">通过派发$emit派发事件传递数据给父组件</button>
data(){
    return{
       props: {
            msg: String,//接受父组件传递的数据
         },
    }
},
methods:{
    change() {
      //派发一个updateParentMsg事件
      this.$emit('updateParentMsg', 'child msg')
    }
}

$children / $parent / ref

• ⽗组件可以通过$children访问⼦组件，子组件可以通过 $parent来访问父组件，不过一般情况下不推荐通过这种方式来实现组件通信。
• ref: 访问子组件实例或子元素，使用后可以直接访问子组件的数据或调用子组件的方法。

//父组件

<child ref="childMsg" />

<button @click="handleClick">在子组件执行</button>

methods:{
    handleClick(){
        this.$refs.childMsg.handleChild();
    }
}

//子组件

methods:{
    handleChild(){
        console.log("我是父组件过来的方法")
    }
}

 二、非父子组件件的数据传递

Vue官方对于vue框架的定义是轻量级的视图层框架，当项目中出现很复杂的数据传递时（主要在于同级组件之间需要进行数据传递的话，如果单纯地靠一层层的传递，可能会让项目变得更加复杂），所以单纯依靠Vue框架是解决不了复杂的数据传递的，此时我们需要引入一些工具或者设计模式来解决vue之中组件之间复杂的数据传递。

两种方案

• 数据层的框架——Vux
• 发布订阅模式（又称：总线机制、Bus、观察者模式）

我们将Bus定义到全局：

app.js

var eventBus = {
    install(Vue,options) {
        Vue.prototype.$bus = vue
    }
};
Vue.use(eventBus);

然后在组件中，可以使用$emit、$on、$off 分别来分发、监听、取消监听事件：

分发事件的组件：

// ...
methods: {
  todo: function () {
    this.$bus.$emit('todoSth', params);  //params是传递的参数
    //...
  }
}

监听的组件：

// ...
created() {
  this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
      //todo something
  })
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('todoSth');
},