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的另一種寫(xiě)法
我們思考一種情況，如果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)聽(tīng)事件,第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是回調(diào)函數(shù)。
emitter.on("why", (data) => {
console.log(data)
})
//*表示可以監(jiān)聽(tīng)全部的事件。
emitter.on("*", (type, data) => {
console.log(type, data)
})
取消事件
//取消emitter中所有的監(jiān)聽(tīng)
emitter.all.clear()
//或者
//定義一個(gè)函數(shù)
function onFoo(){}
emitter.on("foo", onFoo)
emitter.on("foo", onFoo)
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
查找Vue中下標(biāo)的操作(some和findindex)
這篇文章主要介紹了查找Vue中下標(biāo)的操作(some和findindex)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue 路由懶加載中給 Webpack Chunks 命名的方法
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Vue.js中用v-bind綁定class的注意事項(xiàng)
關(guān)于數(shù)據(jù)綁定一個(gè)常見(jiàn)需求就是操作元素的class列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩?，我們可以?v-bind 處理它們，但是使用v-bind綁定class的時(shí)候我們要有一些注意事項(xiàng)，下面這篇文章就給大家分享了下要注意的方面，希望能對(duì)大家有所幫助，下面來(lái)一起看看吧。2016-12-12
vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
本文主要介紹了vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件
本篇文章主要介紹了vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
vuex state及mapState的基礎(chǔ)用法詳解
這篇文章主要介紹了vuex state及mapState的基礎(chǔ)用法詳解,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題
這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue仿淘寶訂單狀態(tài)tab切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue 子組件和父組件傳值的示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-09-09