vue3 非父子組件通信詳解
業(yè)務(wù)場景是，不是父子組件實(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可以傳入兩個參數(shù)：
name：提供的屬性名稱；
value：提供的屬性值；
在 后代組件 中可以通過 inject 來注入需要的屬性和對應(yīng)的值：
可以通過 inject 來注入需要的內(nèi)容；
inject可以傳入兩個參數(shù)：
要 inject 的 property 的 name；
默認(rèn)值；
數(shù)據(jù)的響應(yīng)式
為了增加 provide 值和 inject 值之間的響應(yīng)性，我們可以在 provide 值時使用 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)文章
關(guān)于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題
這篇文章主要介紹了關(guān)于element同時使用Drawer和Dialog出現(xiàn)多個遮罩問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue3整合WangEditor富文本編輯器的實(shí)踐指南
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?項(xiàng)目中集成?WangEditor?富文本編輯器,實(shí)現(xiàn)圖文混排、自定義擴(kuò)展等高階功能,感興趣的小伙伴可以了解下2025-03-03
vue.js2.0 實(shí)現(xiàn)better-scroll的滾動效果實(shí)例詳解
better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫。better-scroll 也很強(qiáng)大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等，下面通過本文給大家介紹vue.js2.0 實(shí)現(xiàn)better-scroll的滾動效果，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機(jī)制(bus)的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue3中導(dǎo)航守衛(wèi)的基本使用方法,正如其名vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,下面需要的朋友可以參考下2023-03-03
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue scroll滾動判斷的實(shí)現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)
這篇文章主要介紹了vue scroll滾動判斷的實(shí)現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Element中el-input密碼輸入框?yàn)g覽器自動填充賬號密碼問題的解決方法
自己寫了一個管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號密碼,每次登錄時就會自動回填記住的賬號密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框?yàn)g覽器自動填充賬號密碼問題的解決方法,需要的朋友可以參考下2022-09-09
Vue3+Element-Plus?實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單時顯示不同內(nèi)容組件展示在Main區(qū)域功能
這篇文章主要介紹了Vue3+Element-Plus?實(shí)現(xiàn)點(diǎn)擊左側(cè)菜單時顯示不同內(nèi)容組件展示在Main區(qū)域功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01