父传子

通过props传递

父组件： <child value = '传递的数据' />

子组件: props['value'],接收数据,接受之后使用和data中定义数据使用方式一样

子传父

在父组件中给子组件绑定一个自定义的事件，子组件通过$emit()触发该事件并传值。

父组件： <child @receive = 'receive' />

子组件:  this.$emit('receive','传递的数据')

兄弟组件传值

通过vuex
父元素搭个桥即可
通过中央通信 let eventBus = new Vue()

可以在main.js中添加实例
Vue.prototype.eventBus = new Vue()
在组件通过this.eventBus调用

A：methods :{ 函数{eventBus .$emit(‘自定义事件名’，数据)} 发送
B：created(){eventBus .$on(‘A发送过来的自定义事件名’，函数)} 进行数据接收

祖先后代 provide & inject

props一层层传递，爷爷给孙子还好，如果嵌套了五六层还这么写，感觉自己就是一个沙雕，所以这里介绍一个稍微冷门的API， provice/inject,专门用来跨层级提供数据

// 祖先
<script>
import Child from '@/components/Child'
export default {
  name: "app",
  provide:{
    name:'vue'
  },
  components:{Child}
}
<script>
//子孙
<template>   
    <div>
        <h3>Grandson</h3>
        <p>
            祖先元素提供的数据 : {{name}}
        </p>
    </div>
</template>
<script>
export default {
    inject:['name']
}
</script>

但是provider和inject不是响应式的，如果子孙元素想通知祖先，就需要hack一下，Vue1中有dispatch和boardcast两个方法，但是vue2中被干掉了，我们自己可以模拟一下
原理就是可以通过this.$$parent和this.$children来获取父组件和子组件，可以通过递归实现，我们还可以挂载到Vue的原型链上

// 在main.js文件中写入
// $dispatch方法
Vue.prototype.$dispatch =  function(eventName, data) {
  let parent = this.$parent
  // 查找父元素
  while (parent ) {
    if (parent) {
      // 父元素用$emit触发
      parent.$emit(eventName,data)
      // 递归查找父元素
      parent = parent.$parent
    }else{
      break
    }
  }
}
// $boardcast方法
Vue.prototype.$boardcast = function(eventName, data){
  boardcast.call(this,eventName,data)
}
function boardcast(eventName, data){
  this.$children.forEach(child => {
    // 子元素触发$emit
    child.$emit(eventName, data)
    if(child.$children.length){
      // 递归调用，通过call修改this指向 child
      boardcast.call(child, eventName, data)
    }
  });
}