【VUE】vue父子组件通信 以及 非父子组件通信的方法

Part1：父子组件

父组件给子组件传值不需要使用其他库，可以直接使用props传值，talk is cheap，show me the code！

Parent.vue

使用import引入子组件后，只需要将子组件props内的变量与父组件之间绑定起来，通过修改父组件data里面的值，即可达到对子组件的控制

Children.vue

子组件的props里面定义好childMsg即可接收父组件的改变，使用this.$emit即可向父组件传递事件触发，并传参

part2：非父子组件

非父子组件事件触发我只知道2种方式，但原理都是一样的，借助另一个对象转发事件。其中，事件中心插件vue-bus是我使用过的一种方式，效果也还可以，具体可参考 vue-bus文档 。

在这里，为了减少对其他库的依赖，直接new 一个Vue出来作为事件中心，效果和vue-bus几乎是一模一样的，但有无缺陷目前本人还无法得知。废话不多说，直接上代码。

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.bus = new Vue()    //此处全局注册一个Vue作为事件中心
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

Brother1.vue

Brother2.vue

需要注意的是，最好在页面实例销毁之前将事件监听取消掉，不然当你离开这个页面之后，事件监听是依然存在的，这样可能会造成一些不可预估的错误，除非你需要继续监听这个事件。

使用new Vue()这个方法不管是代码还是效果，几乎都和使用vue-bus一模一样。如果不想使用过多的插件库，这未免不是一个好方法（在我不知道副作用的情况下）。

that's all，对于以上的言论，如有不正确的地方，希望各位多多包涵并加以指正