组件通信

vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值

1.父子之间传值：可以使用$emit/props

伪代码如下

    <!-- 父组件 -->
    <child :value="value" @changeValue='changeValue'></child>
    data() {
        return {
            value:'parent',
        }
    },
    methods: {
        changeValue(val) {
            console.log(val)
        }
    }
    <!-- 子组件 -->
    <div>
        子组件 {{value}}
        <button @click="emitValue">传值</button>
    </div>
    props: ['value'],
    methods: {
        emitValue() {
            this.$emit('changeValue', this.value+'+child')
        }
    }

2. 兄弟组件之间传值

2.1. 可采用$emit/props ，子1传父，父传子2， 与父子之间传值相似
2.2. 采用vuex存储状态

2.3. eventBus时间车

• eventsBus.$emit 发送数据
• eventBus.$on 监听数据
• eventBus.$off('msg') 取消监听指定事件
• eventBus.$off() 取消监听所有事件
  伪代码

// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()

<template>
<!-- 子1 -->
    <div>
        child01     {{msg}}
    </div>
</template>
<script>
import {eventBus} from '../js/eventBus'
export default {
    data() {
        return {
            msg: ''
        }
    },
    mounted() {
            // 先释放监听，避免重复监听
            eventBus.$off('child02').$on('child02', val => {
                this.msg = val;
            })
        }
}
</script>



<template>
<!-- 子2 -->
    <div>
        <button @click="emitBorther">child02</button>
    </div>
</template>
<script>
import {eventBus} from '../js/eventBus'
export default {
    methods: {
        emitBorther() {
            eventBus.$emit('child02','我是child02')
        }
    }
}
</script>

注意
页面销毁时一定要释放监听
监听事件时，需要先释放监听，避免重复监听

3. 跨代组件传值

3.1.采用vuex存储状态
3.2. provide/inject : 一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
伪代码如下

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}