vue?組件通信的多種方式
前言
在vue中，? 組件的關(guān)系不外乎以下三種：
組件是需要通信的，在開(kāi)發(fā)中，常用到的通信方式有：vuex、eventBus、以及props與emit、$parent與$children，除此之外，還有provide與inject、$attrs與$listeners等。
一、vuex
這個(gè)相信大家用的很多了，簡(jiǎn)單回顧一下：
- State：放狀態(tài)的地方
- Mutation：唯一修改狀態(tài)的地方，不支持異步
- Action：通過(guò)調(diào)用Mutation中的方法來(lái)達(dá)到修改狀態(tài)的目的，支持異步
- Getter：可以理解為計(jì)算屬性
- Module：模塊，每個(gè)模塊擁有自己的 state、mutation、action、getter
簡(jiǎn)單的使用這里不贅述，提一下module里面的命名空間。
如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過(guò)添加 namespaced: true 的方式使其成為帶命名空間的模塊。當(dāng)模塊被注冊(cè)后，它的所有 getter、action 及 mutation 都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名
這樣，在使用的時(shí)候我們就可以這樣用了：
二、eventBus
這個(gè)稱(chēng)為‘事件總線’，簡(jiǎn)單看下是怎么使用的：
- 初始化
首先是初始化一個(gè)eventBus，可以綁定到vue原型上，也可以綁定到window對(duì)象上，還可以抽出來(lái)當(dāng)做一個(gè)模塊，在需要的時(shí)候再引入。這里直接綁定到vue原型上：
- 創(chuàng)建事件和刪除事件
在需要的組件上創(chuàng)建和刪除事件：
- 觸發(fā)事件
最后就是在需要的地方觸發(fā)事件了
三、props/emit
這個(gè)不用多說(shuō)了，父子通信用的最多的應(yīng)該就是這個(gè)了。當(dāng)然，如果以子組件為跳板，也可以做到祖孫之間通信，不過(guò)比較麻煩。不建議這樣操作。
四、$parent/$children
$parent直接訪問(wèn)的就是父實(shí)例，而$children則返回的是實(shí)例數(shù)組。所以我一般都是$parent搭配$refs使用。
五、$attrs/$listeners
這兩個(gè)可能會(huì)用的比較少，來(lái)看下官網(wǎng)的介紹：
怎么理解呢，簡(jiǎn)單來(lái)講就是，$attrs接收除了prop、style、class之外的所有綁定屬性，$listeners則接收除了被.native修飾的所有綁定事件。具體來(lái)看下例子：
<template>
<div>
<p>父組件</p>
<input type="text" v-model="formData.inputValue" />
<p>子組件</p>
<Son
:inputValue="formData.inputValue"
:otherValue="otherValue"
@success="success"
@input.native="handleInput"
v-bind="$attrs"
v-on="$listeners"
></Son>
</div>
</template>
<script>
import Son from "./son.vue";
export default {
components: { Son },
provide() {
return {
father: this.formData,
};
},
data() {
return {
formData: {
inputValue: "123",
},
otherValue: 999,
};
},
methods: {
success(data) {
console.log(data);
},
handleInput() {},
},
};
</script>
<template>
<div>
<input type="text" v-model="inputValue" @change="handleChange" />
</div>
</template>
<script>
export default {
props: {
inputValue: String,
},
created() {
console.log(this.$attrs, "son---$attrs");
console.log(this.$listeners, "son---$listeners");
},
methods: {
handleChange() {
this.father.inputValue = this.inputValue;
},
},
};
</script>
按照之前的理解，$attrs應(yīng)該只能接收到otherValue，$listeners則只能接收到success事件，看下打印結(jié)果：
結(jié)果確實(shí)也是這樣的。除此之外，還可傳遞給孫組件：
<template>
<div>
<input type="text" v-model="inputValue" @change="handleChange" />
<GrandSon v-bind="$attrs" v-on="$listeners"></GrandSon>
</div>
</template>
<script>
import GrandSon from "./grandSon.vue";
export default {
components: { GrandSon },
props: {
inputValue: String,
},
created() {
console.log(this.$attrs, "son---$attrs");
console.log(this.$listeners, "son---$listeners");
},
methods: {
handleChange() {
this.father.inputValue = this.inputValue;
},
},
};
</script>
<template>
<div>
<input type="text" v-model="inputValue" @change="handleChange" />
</div>
</template>
<script>
export default {
props: {
inputValue: String,
},
created() {
console.log(this.$attrs, "grandSon---$attrs");
console.log(this.$listeners, "grandSon---$listeners");
},
methods: {
handleChange() {
this.father.inputValue = this.inputValue;
},
},
};
</script>
通過(guò)這種方式，祖孫之間也實(shí)現(xiàn)了通信。
六、provide/inject
provide/inject可以在一個(gè)祖先組件中向它的所有后輩組件注入一個(gè)依賴(lài)，只要上下游關(guān)系成立就能生效。簡(jiǎn)單的理解就是provide是注入數(shù)據(jù)，inject是獲取數(shù)據(jù)。所以provide是用于父組件，inject是用于子孫組件。provide應(yīng)該是一個(gè)對(duì)象或者返回一個(gè)對(duì)象的函數(shù)，inject應(yīng)該是一個(gè)字符串?dāng)?shù)組或者一個(gè)對(duì)象。官網(wǎng)提到這么一句話：
提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的 property 還是可響應(yīng)的。
這句話怎么理解呢？字面理解就是你要想在上下游傳遞的那個(gè)數(shù)據(jù)是可響應(yīng)的，那么就應(yīng)該以對(duì)象的形式傳遞，先試一下以基本數(shù)據(jù)類(lèi)型的形式傳遞，看下例子：
父組件：
<template>
<div>
<p>父組件</p>
<input type="text" v-model="inputValue" />
<p>子組件</p>
<Son></Son>
<p>孫組件</p>
<GrandSon></GrandSon>
</div>
</template>
<script>
import Son from "./son.vue";
import GrandSon from "./grandSon.vue";
export default {
components: { Son, GrandSon },
provide() {
return {
father: this.inputValue,
};
},
data() {
return {
inputValue: "123",
};
},
};
</script>子組件：
<template>
<div>
<input type="text" v-model="inputValue" @change="handleChange" />
</div>
</template>
<script>
export default {
inject: ["father"],
data() {
return {
inputValue: "",
};
},
watch: {
father(val) {
console.log(val, "val");
this.inputValue = val;
},
},
created() {
console.log(this, "this");
},
methods: {
handleChange() {
this.father.inputValue = this.inputValue;
},
},
};
</script>在子組件打印this：
可以看到，父組件的inputValue值是被注入到子組件當(dāng)中的。但卻監(jiān)聽(tīng)不到這個(gè)father。
然后，我們改成以對(duì)象的形式進(jìn)行注入：
<template>
<div>
<p>父組件</p>
<input type="text" v-model="formData.inputValue" />
<p>子組件</p>
<Son></Son>
<p>孫組件</p>
<GrandSon></GrandSon>
</div>
</template>
<script>
import Son from "./son.vue";
import GrandSon from "./grandSon.vue";
export default {
components: { Son, GrandSon },
provide() {
return {
father: this.formData,
};
},
data() {
return {
formData: {
inputValue: "123",
},
};
},
};
</script><template>
<div>
<input type="text" v-model="inputValue" @change="handleChange" />
</div>
</template>
<script>
export default {
inject: ["father"],
data() {
return {
inputValue: "",
};
},
watch: {
'father.inputValue'(val){
console.log(val, "val");
this.inputValue = val;
},
},
created() {
console.log(this, "this");
},
methods: {
handleChange() {
this.father.inputValue = this.inputValue;
},
},
};
</script>這個(gè)時(shí)候我們看下打印的this以及效果：
這樣就可以實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)了。這里有一個(gè)點(diǎn)需要注意，如果在父組件中將整個(gè)父組件的this注入到后代組件中，在后代組件中是不能通過(guò)深度監(jiān)聽(tīng)來(lái)監(jiān)聽(tīng)這個(gè)注入的對(duì)象的，會(huì)報(bào)堆棧溢出的錯(cuò)誤。所以這里我用的是this.formData的形式注入。這樣在子孫組件中可以通過(guò)'father.inputValue'這樣的形式監(jiān)聽(tīng)，也可以通過(guò)這樣的形式：
father: {
handler(val) {
console.log(val);
},
deep: true,
},
至于為什么會(huì)導(dǎo)致這個(gè)問(wèn)題，我們先看下深度監(jiān)聽(tīng)的實(shí)現(xiàn)方式：
這段注釋什么意思呢，簡(jiǎn)單理解就是vue是通過(guò)遞歸遍歷對(duì)象里面的每一個(gè)屬性，將是對(duì)象的屬性收集起來(lái)進(jìn)行監(jiān)聽(tīng)。眾所周知，遞歸是很容易引起堆棧溢出的，而看下this對(duì)象就不難理解為什么會(huì)導(dǎo)致堆棧溢出了（太多了，而且是層層嵌套下去的）。
以上就是Vue組件通信的幾種方式，如果還要在扯一扯，瀏覽器的緩存也可以作為一種手段。。。
到此這篇關(guān)于vue 組件通信的幾種方式的文章就介紹到這了,更多相關(guān)vue 組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過(guò)程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路詳解
最近領(lǐng)導(dǎo)提了一個(gè)新需求:仿照e簽寶,實(shí)現(xiàn)pdf電子簽章,本文給大家介紹vue使用pdfjs-dist+fabric實(shí)現(xiàn)pdf電子簽章的思路,感興趣的朋友一起看看吧2023-12-12
vue使用iframe嵌入網(wǎng)頁(yè)的示例代碼
本篇文章主要介紹了vue使用iframe嵌入網(wǎng)頁(yè)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE3基礎(chǔ)學(xué)習(xí)之click事件詳解
由于vue是一個(gè)雙向數(shù)據(jù)綁定的框架,它的點(diǎn)擊事件與以前常用的還是有很大的差別的,下面這篇文章主要給大家介紹了關(guān)于VUE3基礎(chǔ)學(xué)習(xí)之click事件的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue之監(jiān)聽(tīng)頁(yè)面是否以到底部
這篇文章主要介紹了vue之監(jiān)聽(tīng)頁(yè)面是否以到底部問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue-品牌管理案例-指令和過(guò)濾器的相關(guān)知識(shí)，文中通過(guò)代碼給大家介紹了過(guò)濾器的基本使用,需要的朋友可以參考下2019-11-11
最近學(xué)習(xí)vue.js有一段時(shí)間了，使用vue做了一套后臺(tái)管理系統(tǒng)，其中使用最多就是遞歸組件，也因?yàn)樽约簩?duì)官方文檔的不熟悉使得自己踩了不少坑，所以今天寫(xiě)出來(lái)和大家一起分享。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
vue2老項(xiàng)目中node-sass更換dart-sass的操作方法
這篇文章主要介紹了vue2老項(xiàng)目中node-sass更換dart-sass的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-07-07
vue實(shí)現(xiàn)拖拽或點(diǎn)擊上傳圖片
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽或點(diǎn)擊上傳圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09