在開發(fā)中原茅，我們構(gòu)建了組件樹之后，除了父子組件之間的通信之外抡医，還會有非父子組件之間的通信。
非父子組件的通信又可以分為祖先組件和后代組件之間的通信早敬、兄弟組件之間的通信忌傻、沒有任何關(guān)系組件之間的通信
這里我們主要講祖先組件和后代組件之間的通信
祖先組件向后代組件傳遞數(shù)據(jù)：
祖先組件通過provide向后代組件傳遞數(shù)據(jù)
后代組件通過inject接收祖先組件傳遞給后代組件的數(shù)據(jù)
image.png
project/inject用法
image.png
基本用法
對象寫法:祖先組件只能傳給子孫一些固定的數(shù)據(jù)大脉，不能把data里的數(shù)據(jù)傳給子孫組件
App.vue
<template>
<div>
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
export default {
components: {
Home,
},
provide: {//對象寫法只能傳給子孫一些固定的數(shù)據(jù)，不能把data里的數(shù)據(jù)傳給子孫組件
name: 'why',
age: 18
},
data() {
return {
message: '今天天氣不錯'
}
}
}
</script>
App.vue的子組件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
App.vue的孫子組件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年齡： {{age}}
</div>
</template>
<script>
export default {
inject: ['name', 'age']
}
</script>
進階用法
如果想把祖先組件data中的數(shù)據(jù)傳遞給后代組件水孩，需要把provide寫成函數(shù)形式镰矿，此函數(shù)返回一個對象
App.vue
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
export default {
components: {
Home,
},
provide() {
//函數(shù)寫法可把data中的數(shù)據(jù)傳遞給子孫組件
return {
name: 'why',
age: 18,
message: this.message
}
},
data() {
return {
message: '今天天氣不錯'
}
}
}
</script>
App.vue的子組件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
App.vue的孫子組件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年齡： {{age}}
<p>{{message}}</p>
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'message']
}
</script>
執(zhí)行npm run serve運行項目，并在瀏覽器打開
image.png
修改祖先組件
App.vue中input輸入框的值荷愕，改變message的值后代組加
HomeContent.vue接收到的message依然為祖先組件App.vue中data里message屬性的初始值衡怀，修改
祖先元素中message的值，后代組件接收到的message的值并不會響應(yīng)式改變
image.png
深度進階用法
如果希望祖先組件傳遞給后代組件的數(shù)據(jù)安疗，如果祖先元素中數(shù)據(jù)發(fā)生改變抛杨，后代組件接收到的數(shù)據(jù)也響應(yīng)式發(fā)生改變,需要借助vue3提供的computed Api
App.vue
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
import { computed } from "vue"
export default {
components: {
Home,
},
provide() {
//使用computed把message的值變成一個響應(yīng)式對象，computed函數(shù)的返回值為ref對象
return {
name: 'why',
age: 18,
message: computed(() => this.message),
}
},
data() {
return {
message: '今天天氣不錯'
}
}
}
</script>
App.vue的子組件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
App.vue的孫子組件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年齡： {{age}}
<!--message為ref對象荐类，值存儲在value中-->
<p>{{message.value}}</p>
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'message']
}
</script>
執(zhí)行npm run serve運行項目怖现，并在瀏覽器打開
修改祖先元素中message的值，后代組件接收到的message的值也會響應(yīng)式改變
image.png
如果希望祖先組件傳遞給后代組件的數(shù)據(jù)玉罐，如果祖先元素中數(shù)據(jù)發(fā)生改變屈嗤，后代組件接收到的數(shù)據(jù)也響應(yīng)式發(fā)生改變，但是不用vue3api吊输，只用vue2api
App.vue
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
export default {
components: {
Home,
},
provide() {
//使用vue2用法的話饶号，message的值改為一個有返回值的方法
return {
name: 'why',
age: 18,
message: () => this.message,
}
},
data() {
return {
message: '今天天氣不錯'
}
}
}
</script>
App.vue的孫子組件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年齡： {{age}}
<!--message為ref對象，值存儲在value中-->
<p>{{message()}}</p>
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'message']
}
</script>
后代組件向祖先組件傳遞數(shù)據(jù)：
通過使用mitt模塊創(chuàng)建的事件總線emitter實現(xiàn)
后代組件通過emitter.emit發(fā)射事件,可以攜帶參數(shù)
祖先組件通過emitter.on監(jiān)聽事件季蚂，在回調(diào)中接收參數(shù)
例：想要實現(xiàn)點擊HomeContent中的修改message按鈕茫船，修改App.vue中的message的值
1.安裝mitt
npm install mitt --save
2.封裝src/utils/eventbus.js
import mitt from "mitt"
const emitter = mitt()
export default emitter
3.App.vue中通過emitter.on監(jiān)聽其他組件中通過事件總線發(fā)射的具體某個事件
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from "./Home.vue";
import { computed } from "vue";
import emitter from "./utils/eventBus";
export default {
components: {
Home,
},
provide() {
return {
name: "why",
age: 18,
message: computed(() => this.message),
};
},
created() {
//監(jiān)聽事件
emitter.on("changeMes", (message) => {
console.log(message);
this.message = message;
});
},
data() {
return {
message: "今天天氣不錯",
};
},
};
</script>
App.vue的子組件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
4.App.vue的孫子組件HomeContent.vue中通過emitter.emit發(fā)射事件
<template>
<div>
姓名：{{name}} - 年齡： {{age}}
<!--message為ref對象，值存儲在value中-->
<p>{{message.value}}</p>
<button @click="changeMessage">修改message</button>
</div>
</template>
<script>
import emitter from "./utils/eventBus";
export default {
inject: ["name", "age", "message"],
methods: {
changeMessage() {
//發(fā)射事件
emitter.emit("changeMes", "雷電預(yù)警");
},
},
};
</script>
執(zhí)行npm run serve扭屁，效果如下圖算谈，點擊了修改message按鈕，App.vue中message被改變
image.png
image.png
5.如果想在App.vue中監(jiān)聽所有組件通過事件總線發(fā)射的事件料滥，可以通過下面：
//監(jiān)聽所有組件通過事件總線發(fā)送的事件
emitter.on("*", (type, message) => {
console.log("第一個參數(shù)為監(jiān)聽到的事件類型", type);
console.log("第二個參數(shù)為監(jiān)聽到的事件傳遞的參數(shù)", message);
});
例：
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from "./Home.vue";
import { computed } from "vue";
import emitter from "./utils/eventBus";
export default {
components: {
Home,
},
provide() {
return {
name: "why",
age: 18,
message: computed(() => this.message),
};
},
created() {
//監(jiān)聽事件
emitter.on("changeMes", (message) => {
console.log(message);
this.message = message;
});
//監(jiān)聽所有組件通過事件總線發(fā)送的事件
emitter.on("*", (type, message) => {
console.log("第一個參數(shù)為監(jiān)聽到的事件類型", type);
console.log("第二個參數(shù)為監(jiān)聽到的事件傳遞的消息", message);
});
},
data() {
return {
message: "今天天氣不錯",
};
},
};
</script>
<style scoped></style>
image.png
6.Mitt的事件取消
在某些情況下我們可能希望取消掉之前注冊的函數(shù)監(jiān)聽：
6.1取消emitter中所有的監(jiān)聽
emitter.all.clear()
6.2取消具體某個事件的監(jiān)聽
//監(jiān)聽的時候然眼，需要把觸發(fā)監(jiān)聽調(diào)用的回調(diào)函數(shù)的引用地址進行保存
const onFoo = () => {}
emitter.on('foo', onFoo) //監(jiān)聽
emitter.off('foo', onFoo) //取消監(jiān)聽
mitt模塊創(chuàng)建的事件總線不僅可以用在后代組件向祖先組件發(fā)送事件傳遞消息，祖先組件監(jiān)聽事件葵腹，
也可以用在任何兩個組件之間高每，其中一個向另一個發(fā)射事件，傳遞消息
此文檔主要內(nèi)容來源于王紅元老師的vue3+ts視頻教程
