vue中非父子組件的通信你了解嗎
我們總結(jié)了父子組件通信方式有：props + emit。這里我們將總結(jié)一下，非父子組件通信方式，這里還不涉及到Vuex。
如果存在祖孫組件，我們可以通過(guò)Provide和Inject進(jìn)行通信。
如果不是祖孫組件，也不是父子組件，我們可以采用Mitt全局事件總線第三方庫(kù)來(lái)實(shí)現(xiàn)。
一、Provide和Inject
Provide和Inject用于非父子組件之間共享數(shù)據(jù)，比如有一些深度嵌套的組件，子組件想要獲取父組件的數(shù)據(jù)，如果不存在Provide和Inject選項(xiàng)，我們可以通過(guò)props進(jìn)行一次傳遞數(shù)據(jù)，但是這樣做太過(guò)于繁瑣。
對(duì)于上述情況，我們可以使用Provide和Inject無(wú)論組件結(jié)構(gòu)嵌套有多深，父組件都可以作為子組件數(shù)據(jù)的提供者。
父組件存在Provide來(lái)提供數(shù)據(jù)。
子組件存在Inject來(lái)獲取數(shù)據(jù)。
在實(shí)際過(guò)程中，父組件不知道哪個(gè)子組件使用其數(shù)據(jù)，子組件也不知道使用的是哪個(gè)父組件的數(shù)據(jù)。
Provide和Inject的基本使用
//父組件
<template>
<div>
<Content></Content>
</div>
</template>
<script>
import Content from "./components/Content.vue";
export default {
data() {
return {};
},
provide:{
name:"張三",
age:20
},
components: {
Content
}
};
</script>
<style scoped></style>
//子組件
<template>
<div>
<h1>這里是Content組件</h1>
<h1>{{ name }} -- {{age}}</h1>
<ContentBase></ContentBase>
</div>
</template>
<script>
import ContentBase from "./ContentBase.vue";
export default {
data() {
return {};
},
components: {
ContentBase
},
inject:["name", "age"]
};
</script>
<style scoped></style>
//孫組件
<template>
<div>
<h1>這里是contentBase組件</h1>
<h1>{{name}} -- {{age}}</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
inject: ["name", "age"]
};
</script>
<style scoped>
</style>
最終顯示結(jié)果為：
二、Provide和Inject的另一種寫法
我們思考一種情況，如果Provide拿到的數(shù)據(jù)，是從data拿到的數(shù)據(jù)，此時(shí)如果獲取? 此時(shí)this可以使用嗎?
<template>
<div>
<Content></Content>
</div>
</template>
<script>
import Content from "./components/Content.vue";
export default {
data() {
return {
source: ["111","222", "333"]
};
},
provide:{
name:"張三",
age:20,
res: this.source.length //我們?cè)诖藭r(shí)增加res，想要通過(guò)this.source.length拿到數(shù)組的長(zhǎng)度
},
components: {
Content
}
};
</script>
<style scoped></style>
該結(jié)果是錯(cuò)誤的。
報(bào)錯(cuò)信息顯示，我們從undefined上讀取屬性，此時(shí)this為undefined。原因：從上面代碼我們可以看出，this指向的是undefiend(因?yàn)閠his執(zhí)行最外層)。
解決方法
我們將Provide設(shè)置為一個(gè)函數(shù)，并且返回一個(gè)對(duì)象，如下代碼所示：
<template>
<div>
<Content></Content>
</div>
</template>
<script>
import Content from "./components/Content.vue";
export default {
data() {
return {
source: ["111", "222", "333"],
};
},
provide() {
return {
name: "張三",
age: 20,
res: this.source.length,
};
},
components: {
Content,
},
};
</script>
<style scoped></style>
顯示結(jié)果：
此時(shí)我們?cè)偎伎家粋€(gè)問(wèn)題，如果我們向data數(shù)組中新增一個(gè)元素，在其他地方獲取的數(shù)組長(zhǎng)度會(huì)跟隨變化嗎?
<template>
<div>
<Content></Content>
<button @click="addOneItem">點(diǎn)擊</button>
</div>
</template>
<script>
import Content from "./components/Content.vue";
export default {
data() {
return {
source: ["111", "222", "333"],
};
},
provide() {
return {
name: "張三",
age: 20,
res: this.source.length,
};
},
components: {
Content,
},
methods:{ //在這里添加點(diǎn)擊事件
addOneItem() {
this.source.push("nnn")
console.log(this.source)
}
}
};
</script>
<style scoped></style>
結(jié)果如上圖所示，可以看到數(shù)據(jù)是被添加進(jìn)去的，但是子組件并沒(méi)有檢測(cè)到數(shù)據(jù)的變化。
此時(shí)我們可以使用computed來(lái)檢測(cè)this.source.length的變化，使用代碼如下所示。
<template>
<div>
<Content></Content>
<button @click="addOneItem">點(diǎn)擊</button>
</div>
</template>
<script>
import Content from "./components/Content.vue";
import { computed } from "vue" //從vue中引入computed
export default {
data() {
return {
source: ["111", "222", "333"],
};
},
provide() {
return {
name: "張三",
age: 20,
res: computed(() => this.source.length), //在這里添加computed
};
},
components: {
Content,
},
methods:{
addOneItem() {
this.source.push("nnn")
console.log(this.source)
}
}
};
</script>
<style scoped></style>
因?yàn)槲覀兺ㄟ^(guò)computed獲取的是一個(gè)對(duì)象，此時(shí)我們通過(guò)value屬性拿到值。
三、全局事件總線mitt庫(kù)
在vue2時(shí)，如果我們使用事件總線可以使用this.$bus = new Vue(）也就是實(shí)例化一個(gè)vue對(duì)象。但是我們?cè)趘ue3中不能這樣用。所以我們采用第三方庫(kù)來(lái)實(shí)現(xiàn)組件之間的通信。這個(gè)第三方庫(kù)為mitt
一、安裝
npm install mitt
在文件中引入并且進(jìn)行初始化導(dǎo)出。
import mitt from "mitt"; const emitter = new mitt() export default emitter
監(jiān)聽事件,第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是回調(diào)函數(shù)。
emitter.on("why", (data) => {
console.log(data)
})
//*表示可以監(jiān)聽全部的事件。
emitter.on("*", (type, data) => {
console.log(type, data)
})
取消事件
//取消emitter中所有的監(jiān)聽
emitter.all.clear()
//或者
//定義一個(gè)函數(shù)
function onFoo(){}
emitter.on("foo", onFoo)
emitter.on("foo", onFoo)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue3+vite兼容低版本的白屏問(wèn)題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問(wèn)題的相關(guān)資料,還給大家介紹了vue打包項(xiàng)目以后白屏和圖片加載不出來(lái)問(wèn)題的解決方法,需要的朋友可以參考下2022-12-12
本文分步驟給大家介紹了vue中引入mxGraph的方法，非常不錯(cuò)，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
解決node-sass安裝報(bào)錯(cuò)無(wú)python等情況
在國(guó)內(nèi)安裝node-sass常因無(wú)法穩(wěn)定連接GitHub而失敗,解決方法包括手動(dòng)下載對(duì)應(yīng)的binding.node文件并放入緩存目錄,操作步驟詳細(xì),適合非Python用戶,無(wú)需額外環(huán)境配置2024-10-10
vue項(xiàng)目在線上服務(wù)器訪問(wèn)失敗原因分析
這篇文章主要介紹了vue項(xiàng)目在線上服務(wù)器訪問(wèn)失敗原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象(示例代碼)
在Vue中循環(huán)生成表格數(shù)據(jù)時(shí),可能會(huì)遇到數(shù)據(jù)聯(lián)動(dòng)的現(xiàn)象,即修改一個(gè)表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會(huì)跟著變化,這種現(xiàn)象通常是因?yàn)樗斜砀竦臄?shù)據(jù)引用了同一個(gè)對(duì)象或數(shù)組導(dǎo)致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象,感興趣的朋友一起看看吧2024-11-11
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
動(dòng)態(tài)路由,動(dòng)態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。2017-12-12