一文搞懂Vue2中的組件通信
更新時(shí)間：2022年07月28日 11:32:46 作者：lupulus
這篇文章主要為大家介紹了Vue2中的組件通信方式，文中通過示例進(jìn)行了詳細(xì)的介紹，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的小伙伴可以了解一下
vue 組件通信方式
1.父組件將自己的狀態(tài)分享給子組件使用；
方法：父組件通過子標(biāo)簽傳遞數(shù)據(jù)，子組件通過 props 接收
2.子組件改變父組件的狀態(tài);
方法：父組件在子標(biāo)簽上通過@abc 提供一個(gè)改變自身狀態(tài)的方法，子組件通過$emit("abc", payload)觸發(fā)這個(gè)函數(shù)
3.父組件直接改變子組件的狀態(tài)；
方法：父組件設(shè)法($ref,$children[0])拿到子組件實(shí)例對(duì)象，然后通過實(shí)例對(duì)象直接修改子組件狀態(tài)
4.子組件直接改變父組件的狀態(tài)
方法：子組件通過$parent拿到父組件的改變自身狀態(tài)的方法，然后直接調(diào)用（$parent 可以拿到父組件狀態(tài)，但是最好不要直接修改，而是通過父組件函數(shù)式修改，保持單向數(shù)據(jù)流）
5.父組件通過插槽向子組件傳遞數(shù)據(jù)
方法：子組件定義具名插槽，父組件向插槽內(nèi)傳遞自己的狀態(tài)
6.父組件向后代組件傳值
方法：父組件正常在標(biāo)簽上向子組件傳遞數(shù)據(jù)，子組件不用 props 接收屬性，通過$attrs獲取屬性，通過$listeners 獲取方法。子組件再向下傳遞時(shí)，使用 v-bind="$attr"傳遞屬性，使用v-on="$listeners"傳遞方法
7.父組件向后代組件傳值
方法：父組件js中定義provide函數(shù)提供數(shù)據(jù)源，后代組件通過inject去接收，inject可以是一個(gè)數(shù)組或?qū)ο蟆?/p>
注意：父組件提供的數(shù)據(jù)源如果不是響應(yīng)式的，那么后代修改數(shù)據(jù)，數(shù)據(jù)不會(huì)響應(yīng)變化。如果父組件提供的數(shù)據(jù)源是響應(yīng)式的，但是不是一個(gè)對(duì)象，那么它也不是響應(yīng)式的，所以要用對(duì)象在外包一層對(duì)象（數(shù)組不行）。另外，如果子組件同時(shí)provide一個(gè)inject祖先組件相同名稱的數(shù)據(jù)，那么子組件的后代會(huì)就近使用子組件的數(shù)據(jù)。
官網(wǎng)tip：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的 property 還是可響應(yīng)的。
8.全局通信-事件總線
方法：通過注冊(cè)一個(gè)新的vue實(shí)例作為橋梁，使用$on和$emit來完成通信
9.全局通信-vuex
略（看官方文檔嘍）
1.props傳參
// 父組件向子組件傳遞msg
<template>
<div>
<p>我是dad</p>
<Child :msg="msg" />
</div>
</template>
<script>
import Child from "./ChildItem.vue";
export default {
name: "App",
components: {
Child,
},
data() {
return {
msg: "父親的忠告",
};
},
};
</script>
// 子組件props接收
<template>
<div>
<p>我是子組件</p>
<span>{{ msg }}</span>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: "什么都沒有",
},
},
};
</script>
2.emit,on通信
// 父組件向子組件提供改變自己狀態(tài)的函數(shù)
<template>
<div>
<p>我是dad</p>
<Child @changeMyMind="changeMyMind" />
<span>{{ mind }}</span>
</div>
</template>
<script>
import Child from "./ChildItem.vue";
export default {
name: "App",
components: {
Child,
},
data() {
return {
mind: "偉大萬歲",
};
},
methods: {
changeMyMind(yourMind) {
this.mind = yourMind;
},
},
};
</script>
// 子組件不用接收，直接通過$emit觸發(fā)并傳參就行
<template>
<div>
<p>我是子組件</p>
</div>
</template>
<script>
export default {
mounted() {
this.$emit("changeMyMind", "躺平鳥");
},
};
</script>
3.$ref,$children實(shí)例通信
// 父組件通過$ref或者$children拿到子組件實(shí)例，然后直接修改子組件狀態(tài)
/**
* this.$children`數(shù)組中的元素不是響應(yīng)式的，并且下標(biāo)并不一定對(duì)用父組件引用的子組件的順序，例如有異步加載的子組件，可能影響其在 children 數(shù)組中的順序。所以使用時(shí)需要根據(jù)一定的條件例如子組件的name去找到相應(yīng)的子組件。
**/
<template>
<div>
<p>我是dad</p>
<Child ref="childRef" />
</div>
</template>
<script>
import Child from "./ChildItem.vue";
export default {
components: {
Child,
},
mounted() {
// this.$children[0].childMsg = "不你不是";
this.$refs.childRef.childMsg = "不你不是";
},
};
</script>
// 子組件等著被改就行
<template>
<div>
<p>我是子組件</p>
<span>{{ childMsg }}</span>
</div>
</template>
<script>
export default {
data() {
return {
childMsg: "我是子組件數(shù)據(jù)",
};
},
};
</script>4.$parent通信
// 父組件
<template>
<div>
<p>我是dad</p>
<Child />
<span>{{ aa }}</span>
</div>
</template>
<script>
import Child from "./ChildItem.vue";
export default {
components: {
Child,
},
data() {
return {
aa: "",
};
},
methods: {
changeAa(data) {
this.aa = data;
},
},
};
</script>
// 子組件通過$parent拿到父組件實(shí)例，然后直接修改父組件狀態(tài)
<template>
<div>
<p>我是子組件</p>
<span>{{ childMsg }}</span>
</div>
</template>
<script>
export default {
data() {
return {
childMsg: "我是子組件數(shù)據(jù)",
};
},
mounted() {
// this.$parent.aa = "我改了哈"; 不推薦
this.$parent.changeAa("我改了哦");
},
};
</script>5.插槽通信（一般不用）
// 父組件
<template>
<div>
<p>我是dad</p>
<Child>
<template v-slot:boring>
{{ aa }}
</template>
</Child>
</div>
</template>
<script>
import Child from "./ChildItem.vue";
export default {
components: {
Child,
},
data() {
return {
aa: "父組件的數(shù)據(jù)哦",
};
},
};
</script>
// 子組件定義插槽
<template>
<div>
<p>我是子組件</p>
<slot name="boring"></slot>
</div>
</template>
<script>
export default {};
</script>6.$attr,$listener深層雙向通信
// 父組件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son :dadData="dadData" @changeDadData="changeDadData" @keyup="someKeyUp" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "父組件的數(shù)據(jù)哦",
};
},
methods: {
changeDadData(newData) {
this.dadData = newData;
},
someKeyUp(e) {
console.log(e.target.value);
},
},
};
</script>
// 兒子組件
<template>
<div>
<p>我是兒子組件</p>
<span>{{ $attrs.dadData }}</span>
<input type="text" v-on="$listeners" />
<GrandSon v-bind="$attrs" v-on="$listeners" />
</div>
</template>
<script>
import GrandSon from "./GrandSon.vue";
export default {
components: {
GrandSon,
},
mounted() {
console.log(this.$listeners);
},
};
</script>
// 孫子組件
<template>
<div>
<p>我是孫子組件</p>
<input type="text" @input="grandsonInput" />
</div>
</template>
<script>
export default {
methods: {
grandsonInput(e) {
// this.$emit("changeDadData", e.target.value); 也可以觸發(fā)
this.$listeners.changeDadData(e.target.value);
},
},
};
</script>7.provide，inject依賴注入深層次單向通信
// 父組件
<template>
<div>
<p>我是dad</p>
<span>{{ dadMessage }}</span>
<Son />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
provide() {
return {
message: this.dadMessage,
};
},
data() {
return {
dadMessage: {
textContent: "我是個(gè)祖先數(shù)據(jù)",
},
};
},
};
</script>
// 兒子組件
<template>
<div>
<p>我是兒子組件</p>
<span>{{ theData }}</span>
<GrandSon />
</div>
</template>
<script>
import GrandSon from "./GrandSon.vue";
export default {
components: {
GrandSon,
},
inject: {
// 起個(gè)別名
theData: {
// 數(shù)據(jù)來源映射
from: "message",
// 默認(rèn)值
default: () => ({ message: { textContent: "啥也不是" } }),
},
},
};
</script>
// 孫子組件
<template>
<div>
<p>我是孫子組件</p>
<input type="text" @input="grandsonInput" />
<span>{{ message.textContent }}</span>
</div>
</template>
<script>
export default {
methods: {
grandsonInput(e) {
this.message.textContent = e.target.value;
},
},
inject: ["message"],
};
</script>8.$bus事件總線全局通信
// 父組件通過this.$bus.$on監(jiān)聽事件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
};
},
mounted() {
this.$bus.$on("changeDadData", this.changeDadData);
},
methods: {
changeDadData(newData) {
this.dadData = newData;
},
},
// 記得清除監(jiān)聽
beforeDestroy() {
this.$bus.$off("changeDadData");
},
};
</script>
// 孫子組件通過this.$bus.$emit觸發(fā)事件
<template>
<div>
<p>我是孫子組件</p>
<input type="text" @input="grandsonInput" />
<span></span>
</div>
</template>
<script>
export default {
methods: {
grandsonInput(e) {
this.$bus.$emit("changeDadData", e.target.value);
},
},
};
</script>
到此這篇關(guān)于一文搞懂Vue2中的組件通信的文章就介紹到這了,更多相關(guān)Vue2組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題
這篇文章主要介紹了ElementUI組件Dialog彈窗再次打開表單仍顯示上次數(shù)據(jù)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
使用vue3.2實(shí)現(xiàn)多頁簽導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何使用vue3.2 + elementPlus + pinia 實(shí)現(xiàn)多頁簽導(dǎo)航,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
這篇文章主要介紹了Vue入口文件index.html緩存的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vuejs第十一篇組件之slot內(nèi)容分發(fā)實(shí)例詳解
這篇文章主要介紹了Vuejs第十一篇之slot內(nèi)容分發(fā)組件詳解的相關(guān)資料2016-09-09
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下2023-02-02
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue 組件注冊(cè),結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js組件的常見分類、注冊(cè)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05
element表格翻頁第2頁從1開始編號(hào)(后端從0開始分頁)
這篇文章主要介紹了element表格翻頁第2頁從1開始編號(hào)(后端從0開始分頁)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12