父傳子
通過props傳遞
父組件： <child value = '傳遞的數(shù)據(jù)' />
子組件: props['value'],接收數(shù)據(jù),接受之后使用和data中定義數(shù)據(jù)使用方式一樣
子傳父
在父組件中給子組件綁定一個自定義的事件，子組件通過$emit()觸發(fā)該事件并傳值献烦。
父組件： <child @receive = 'receive' />
子組件: this.$emit('receive','傳遞的數(shù)據(jù)')
兄弟組件傳值
- 通過vuex
- 父元素搭個橋即可
- 通過中央通信 let eventBus = new Vue()
可以在main.js中添加實例
Vue.prototype.eventBus = new Vue()
在組件通過this.eventBus調(diào)用
A：methods :{ 函數(shù){eventBus .$emit(‘自定義事件名’层皱，數(shù)據(jù))} 發(fā)送
B：created(){eventBus .$on(‘A發(fā)送過來的自定義事件名’糠悯，函數(shù))} 進行數(shù)據(jù)接收
祖先后代 provide & inject
props一層層傳遞洋满，爺爺給孫子還好孝赫，如果嵌套了五六層還這么寫曼振，感覺自己就是一個沙雕几迄，所以這里介紹一個 稍微冷門的API， provice/inject,專門用來跨層級提供數(shù)據(jù)
// 祖先
<script>
import Child from '@/components/Child'
export default {
name: "app",
provide:{
name:'vue'
},
components:{Child}
}
<script>
//子孫
<template>
<div>
<h3>Grandson</h3>
<p>
祖先元素提供的數(shù)據(jù) : {{name}}
</p>
</div>
</template>
<script>
export default {
inject:['name']
}
</script>
但是provider和inject不是響應(yīng)式的冰评，如果子孫元素想通知祖先映胁，就需要hack一下，Vue1中有dispatch和boardcast兩個方法甲雅，但是vue2中被干掉了解孙，我們自己可以模擬一下
原理就是可以通過this.$$parent和this.$children來獲取父組件和子組件，可以通過遞歸實現(xiàn)抛人，我們還可以掛載到Vue的原型鏈上
// 在main.js文件中寫入
// $dispatch方法
Vue.prototype.$dispatch = function(eventName, data) {
let parent = this.$parent
// 查找父元素
while (parent ) {
if (parent) {
// 父元素用$emit觸發(fā)
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 => {
// 子元素觸發(fā)$emit
child.$emit(eventName, data)
if(child.$children.length){
// 遞歸調(diào)用弛姜，通過call修改this指向 child
boardcast.call(child, eventName, data)
}
});
}
