vue3 非父子組件通信詳解
業(yè)務(wù)場(chǎng)景是，不是父子組件實(shí)現(xiàn)通信
文件目錄
第一種方法
App.vue
<template>
<div>
<Home></Home>
<button @click="addName">增加名字</button>
</div>
</template>
<script>
import Home from "./Home.vue";
import { computed } from "vue";
export default {
name: "App",
components: {
Home,
},
provide() {
return {
name: "張三",
age: 23,
length: computed(() => this.names.length),
};
},
data() {
return {
names: ["張三", "李四", "王五"],
};
},
methods: {
addName() {
this.names.push("fuck you");
console.log("hhhh");
},
},
};
</script>
<style scoped>
</style>
Home.vue
<template>
<div>
<div>我是home</div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from "./HomeContent.vue";
export default {
name: "Home",
components: {
HomeContent,
},
};
</script>
<style scoped>
</style>
HomeContent.vue
<template>
<div>HomeContent:{{ name }}--{{ age }}---{{ length }}</div>
</template>
<script>
export default {
inject: ["name", "age", "length"],
};
</script>
<style lang="scss" scoped>
</style>
vue3中使用Provide函數(shù)和Inject函數(shù)
事實(shí)上我們之前還學(xué)習(xí)過Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的選項(xiàng)。
我們可以通過 provide來提供數(shù)據(jù)：
provide可以傳入兩個(gè)參數(shù)：
name：提供的屬性名稱；
value：提供的屬性值；
在 后代組件 中可以通過 inject 來注入需要的屬性和對(duì)應(yīng)的值：
可以通過 inject 來注入需要的內(nèi)容；
inject可以傳入兩個(gè)參數(shù)：
要 inject 的 property 的 name；
默認(rèn)值；
數(shù)據(jù)的響應(yīng)式
為了增加 provide 值和 inject 值之間的響應(yīng)性，我們可以在 provide 值時(shí)使用 ref 和 reactive。
修改響應(yīng)式Property
如果我們需要修改可響應(yīng)的數(shù)據(jù)，那么最好是在數(shù)據(jù)提供的位置來修改：我們可以將修改方法進(jìn)行共享，在后代組件中進(jìn)行調(diào)用；
注意
如果我們子組件應(yīng)該是只能使用，不能修改的狀態(tài)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過程
Unity webgl嵌入到前端網(wǎng)頁(yè)中,前端通過調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過程,需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue如何下載本地pdf文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API，類型是一個(gè)函數(shù)，本文通過完整代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
vue-resourc發(fā)起異步請(qǐng)求的方法
這篇文章主要介紹了vue-resourc發(fā)起異步請(qǐng)求的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory
這篇文章主要介紹了解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)組件通信的八種方法實(shí)例
ue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)組件通信的八種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
探索Vue.js component內(nèi)容實(shí)現(xiàn)
這篇文章主要和大家一起探索Vue.js component內(nèi)容實(shí)現(xiàn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11