父传子
通过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)
}
});
}
