Vue组件通信

父子组件相互通信

1. 父传子 父组件在调用的子组件标签上添加额外属性，如v-bind:message="msg" 将父组件中的msg属性传递给子组件（如果传递死数据，可以不使用指令）
   子组件通过props来接受父组件传递的数据，如props:{'message'}
   子组件接收和父组件传递名称必须一样
2. 子组件自定义事件，通过$emit 向父组件传递数据，如 子组件

onClick(){
  this.$emit('showData',{name:'hello'})
}

父组件调用：

<child @showData = 'show'></child>

methods(){
  show(data){
  this.name = data.name
  }
}

3. 父组件访问子组件可以使用$children来获取一个包含所有子组件(vueCommponet)的数组，可以通过下标
   索引来获取相对应的子组件的数据。
   子组件访问父组件可以使用$parent来获取父组件的数据（不推荐）
4. 向子组件添加ref属性，父组件通过$refs根据ref属性值来定位子组件，从而获取子组件的数据
   $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

非父子组件通信

1.通过父组件进行通信
2.通过建立公共仓库进行通信
在所有组件最上层建立一个中央事件总线（bus）

import Vue from 'vue'
var PublicEvent = new Vue()
export default PublicEvent

如 从组件1调用组件2 中的方法和数据
在组件1和2中都需要引入中央事件总线PublicEvent
在组件2 中，定义一个事件，通过该事件触发PublicEvent.$emit('名称'，需要传递的值)

在组件1中，通过钩子函数mounted在初始化组件时调用PublicEvent.$on('名称'，func)