VUE组件间通信

vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要。组件是vue的强大功能之一，而组件间的作用域是互相独立的，这就意味着组件间的数据无法互相引用，那么组件间如何通信便成为了重点知识。本文将分析不同组件间通信的各种方式。

prop/ $emit

父组件通过prop向子组件传递数据，而子组件通过$emit向父组件通信

//父组件

//child.vue

父子组件之间的数据传递只能从父组件传向子组件，这正是vue的单向数据流设计理念。而prop在其中充当了数据传递的一个衔接口，在子组件中我们可以在props中定义接收子组件值的类型和默认值。
这种通信方式是父子通信最常用的，传值取值方便简洁明了，但是这种方式的缺点是：

由于数据是单向传递，如果子组件需要改变父组件的props值每次需要给子组件绑定对应的监听事件。
如果父组件需要给孙组件传值，需要子组件进行转发。
注：组件中的数据共有三种形式：data、props、computed

ref

ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，若注册了多个ref引用，同样都将会被注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。然后通过$refs可以获得你绑定的这个组件或者元素的一些相关信息，还可以修改子组件的值。

//父组件：

//子组件：

$attrs/ $listeners

多级组件嵌套时可使用
$attrs: 只代表没有被声明未props的属性，如果某个属性已存在于子组件的props中则$attrs会将该属性剔除，$attrs是组件标签上的静态属性值（attr）和动态属性值（：attr）的对象集合。

//父组件A

import B from './B.vue'
export default {
     data() {
        return {
          name:"小红",
          age:"18"
        }
     },
     components:{ B },
   }

//子组件B

import C from './C.vue'
export default {
    props:["name"]
     data() {
        return { }
     },
     components:{ C },
   }

//孙组件C

$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器，它可以通过 v-on=”$listeners” 传入内部组件。

//父组件A

import B from './B.vue'
export default {
     data() {
        return {
          name:"小红",
          age:"18"
        }
     },
     components:{ B },
methods: {
         //b组件传回来的数据
        onB(msg) {
            console.log('我是B：',msg);
        },

        // c组件传回来的数据
        onC(msg) {
            console.log('我是C：',msg);
        }
    }
   }

//子组件B

import C from './C.vue'
export default {
    props:["name"]
     data() {
        return { }
     },
     components:{ C },
mounted() {
        this.$emit('testB','BBBB');
    }
   }

//孙组件C

简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

provide/ inject

provide 和 inject 绑定并不是可响应的，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

// 父组件

//子级组件

//孙级组件，接收foo

将数据变成可响应式的解决方案是把provide所在的Vue实例给传递下去，再来改造一下

provide() {
    return {
      foo: this.foo
    };
  },
  data() {
    return {
      foo: {
        foo: "父组件"
      }

在这种情况下如果在孙组件改变inject中foo的值，也会响应的更新到父组件中，当然为了保护单向数据流机制，最佳实践还是不要在子组件里更改inject。
在进行组件库开发时provide/inject是一个不错的选择，但是当多个后代组件同时依赖同一个父组件提供数据时，只要任一组件对数据进行了修改，所有依赖的组件都会受到影响，实际上是增加了耦合度；任意层级访问使数据追踪变的比较困难，你并不能准确的定位到是哪一个层级对数据进行了改变，当数据出现问题时，尤其是多人协作时，可能会大大增加问题定位的损耗。

EventBus

EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

const eventBus = new Vue();
eventBus.$emit(eventName, […args]) //发布事件
eventBus.$on(event, callback)      //订阅事件

//实例如下：
// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue();
//另外一种方式，可以直接在项目中的 main.js 初始化 EventBus（这种方式初始化的EventBus是一个全局的事件总线） :
Vue.prototype.$EventBus = new Vue()

//a.vue发送事件




//b.vue接收事件

vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除；如果是业务有反复操作的页面，EventBus在监听的时候就会触发很多次，所以通常在vue页面销毁时，同时移除EventBus事件监听。

//移除事件监听
import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

也可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听
全局EventBus的工作原理是发布/订阅方法，通常称为 Pub/Sub 。

//创建全局EventBus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

在这个特定的总线中使用两个方法$on和$emit。一个用于创建发出的事件，它就是$emit；另一个用于订阅$on：

var EventBus = new Vue();

this.$bus.$emit('nameOfEvent', { ... pass some event data ...});

this.$bus.$on('nameOfEvent',($event) => {
  // ...
})

然后我们可以在某个Vue页面使用this.$bus.$emit("sendMsg", 'emit....');，另一个Vue页面使用

this.$bus.$on('updateMessage', function(value) {
  console.log(value); // emit....
})

同时也可以使用this.$bus.$off('sendMsg')来移除事件监听。

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式