Vue 组件通信详解

父子组件通信： props、 $parent / $children、 provide / inject 、 ref 、  $attrs / $listeners
兄弟组件通信：EventBus 、 Vuex
跨级组件通信: EventBus 、 Vuex 、 provide / inject 、 $attrs / $listeners

父传子 子组件用 props 接收，父组件用 v-bind:prop 发送
父组件


子组件




子传父 子组件用 v-on:click="" this.$emit('name', this.msg)（【有的版本名称只能小写】）发送，父组件自定义事件 v-on:name="getChildValue" 然后在 getChildValue(data){} 方法中接收
父组件


子组件





父子传参还可以用 $parent（对象）和 $children（数组）


provide / reject （上传下）
父辈组件中通过 provide 来提供变量，子孙组件中通过 reject 来注入变量。
父组件


子组件


孙组件




ref
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据 ref="xx" this.$refs.xx

eventBus（事件总线，项目较大难以维护，组件都可以传） $emit(name, data)发送 $on(name, data=>{})接收 【名称小写】
event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

com1.vue 发送事件
加法器
import {EventBus} from './event-bus.js'
data(){
  return {num: 1}
},
additionHandle(){
  EventBus.$emit('addition', {num: this.num++}
)

com2.vue 接收事件
计算和: {{count}}
data() {
  return {count: 0}
},
mounted() {
  EventBus.$on('addition', param => {
    this.count = this.count + param.num;
  })
}


localStorage / sessionStorage
因为 window.loacalStorage.setItem(key, value)、window.loacalStorage.getItem(key) 储存的是字符串，需要用 JSON.parse() / stringify() 转换
可结合 vuex，实现数据持久保存和解决数据及状态混乱问题


$attrs $listeners（仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用）
test.vue



com1.vue



com2.vue