vue中非父子組件的通信你了解嗎
我們總結了父子組件通信方式有：props + emit。這里我們將總結一下，非父子組件通信方式，這里還不涉及到Vuex。
如果存在祖孫組件，我們可以通過Provide和Inject進行通信。
如果不是祖孫組件，也不是父子組件，我們可以采用Mitt全局事件總線第三方庫來實現。
一、Provide和Inject
Provide和Inject用于非父子組件之間共享數據，比如有一些深度嵌套的組件，子組件想要獲取父組件的數據，如果不存在Provide和Inject選項，我們可以通過props進行一次傳遞數據，但是這樣做太過于繁瑣。
對于上述情況，我們可以使用Provide和Inject無論組件結構嵌套有多深，父組件都可以作為子組件數據的提供者。
父組件存在Provide來提供數據。
子組件存在Inject來獲取數據。
在實際過程中，父組件不知道哪個子組件使用其數據，子組件也不知道使用的是哪個父組件的數據。
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>
最終顯示結果為：
二、Provide和Inject的另一種寫法
我們思考一種情況，如果Provide拿到的數據，是從data拿到的數據，此時如果獲取? 此時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 //我們在此時增加res，想要通過this.source.length拿到數組的長度
},
components: {
Content
}
};
</script>
<style scoped></style>
該結果是錯誤的。
報錯信息顯示，我們從undefined上讀取屬性，此時this為undefined。原因：從上面代碼我們可以看出，this指向的是undefiend(因為this執(zhí)行最外層)。
解決方法
我們將Provide設置為一個函數，并且返回一個對象，如下代碼所示：
<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>
顯示結果：
此時我們再思考一個問題，如果我們向data數組中新增一個元素，在其他地方獲取的數組長度會跟隨變化嗎?
<template>
<div>
<Content></Content>
<button @click="addOneItem">點擊</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:{ //在這里添加點擊事件
addOneItem() {
this.source.push("nnn")
console.log(this.source)
}
}
};
</script>
<style scoped></style>
結果如上圖所示，可以看到數據是被添加進去的，但是子組件并沒有檢測到數據的變化。
此時我們可以使用computed來檢測this.source.length的變化，使用代碼如下所示。
<template>
<div>
<Content></Content>
<button @click="addOneItem">點擊</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>
因為我們通過computed獲取的是一個對象，此時我們通過value屬性拿到值。
三、全局事件總線mitt庫
在vue2時，如果我們使用事件總線可以使用this.$bus = new Vue(）也就是實例化一個vue對象。但是我們在vue3中不能這樣用。所以我們采用第三方庫來實現組件之間的通信。這個第三方庫為mitt
一、安裝
npm install mitt
在文件中引入并且進行初始化導出。
import mitt from "mitt"; const emitter = new mitt() export default emitter
監(jiān)聽事件,第一個參數是事件名，第二個參數是回調函數。
emitter.on("why", (data) => {
console.log(data)
})
//*表示可以監(jiān)聽全部的事件。
emitter.on("*", (type, data) => {
console.log(type, data)
})
取消事件
//取消emitter中所有的監(jiān)聽
emitter.all.clear()
//或者
//定義一個函數
function onFoo(){}
emitter.on("foo", onFoo)
emitter.on("foo", onFoo)
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
這篇文章主要介紹了查找Vue中下標的操作(some和findindex)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue 路由懶加載中給 Webpack Chunks 命名的方法
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
關于數據綁定一個常見需求就是操作元素的class列表和它的內聯樣式。因為它們都是屬性，我們可以用 v-bind 處理它們，但是使用v-bind綁定class的時候我們要有一些注意事項，下面這篇文章就給大家分享了下要注意的方面，希望能對大家有所幫助，下面來一起看看吧。2016-12-12
本文主要介紹了vue中動態(tài)修改img標簽中src的方法實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
本篇文章主要介紹了vue動態(tài)生成dom并且自動綁定事件，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了vuex state及mapState的基礎用法詳解,本文通過實例代碼相結合的形式給大家介紹的非常詳細，需要的朋友跟隨腳本之家小編一起學習吧2018-04-04
這篇文章主要介紹了vue?鼠標移入移出(hover)切換顯示圖片問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue仿淘寶訂單狀態(tài)tab切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue-router中 query傳參和params傳參的使用和區(qū)別講解
這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue 子組件和父組件傳值的示例，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-09-09