八種Vue組件間通訊方式合集(推薦)
前言
Vue 提供了各種各樣的通訊,其中包括 兄弟間 的通訊和 非兄弟間 的通訊,借此機(jī)會做個總結(jié)，查閱起來方便。如果喜歡的話可以幫忙點個贊 :+1: 或者關(guān)注一下 :yum:
1、props
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1
代碼結(jié)構(gòu)
在父親組件中使用兒子組件，給兒子通過 :date="xxx" 單向傳值
<template>
<div>
<div>爸爸:{{date}}</div>
<Son1 :date="date"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
date: 1,
};
},
};
</script>
兒子組件通過 props 接受父組件傳過來的值
<template>
<div>兒子:{{date}}</div>
</template>
<script>
export default {
props: {
date: {
type: Number, //校驗類型
default: "1",
},
},
};
</script>
2、$emit
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1
代碼結(jié)構(gòu)
子組件通過觸自身的方法來觸發(fā) $emit 方法,再觸發(fā)父組件的方法,通過 回調(diào)傳參 的方式將修改的內(nèi)容傳遞給父組件
<template>
<div>
<div>兒子:{{date}}</div>
<button @click="changeNum">修改</button>
</div>
</template>
<script>
export default {
props: {
date: {
type: Number,
default: "1",
},
},
methods: {
changeNum() {
this.$emit("changeNum", 2);
},
},
};
</script>
父組件接受回調(diào) params 參數(shù)，即爸爸需要給兒子綁定了一個自定義的事件， $on("changeNum",params)
<template>
<div>
<div>爸爸:{{date}}</div>
<Son1 :date="date" @changeNum="changeNum"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
date: 1,
};
},
methods: {
changeNum(params) {
this.date = params;
},
},
};
</script>
.sync
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1
代碼結(jié)構(gòu)
子組件通過 $emit("update:xxx") 發(fā)射事件
<template>
<div>
<div>兒子:{{date}}</div>
<button @click="changeNum">修改</button>
</div>
</template>
<script>
export default {
props: {
date: {
type: Number,
default: "1",
},
},
methods: {
changeNum() {
this.$emit("update:date", 2);
},
},
};
</script>
父組件通過 :xxx.sync="xxx" 接受參數(shù)
<template>
<div>
<div>爸爸:{{date}}</div>
<Son1 :date.sync="date"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
date: 1,
};
},
};
</script>
<Son1 :date.sync="date"></Son1> //這個寫法是上面的替代品 默認(rèn)組件內(nèi)部觸發(fā) update:count 規(guī)定寫法 <Son1 :date="date" @update:date="val=>date=val"></Son1>
v-model
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1
代碼結(jié)構(gòu)
子組件觸發(fā)的事件只能是 input 事件,接收 props 的屬性名只能叫 value
<template>
<div>
<div>兒子:{{value}}</div>
<button @click="changeNum">修改</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 1,
},
},
methods: {
changeNum() {
this.$emit("input", 2);
},
},
};
</script>
父組件通過 v-model 接收參數(shù)
<template>
<div>
<div>爸爸:{{value}}</div>
<Son1 v-model="value"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
value: 1,
};
},
};
</script>
<Son1 :value="value" @input="val=>value=val"></Son1> //這個寫法是上面的替代品 默認(rèn)組件內(nèi)部觸發(fā) input 規(guī)定寫法 <Son1 v-model="value"></Son1>
v-model 局限只能傳遞一個屬性 如果只有一個 可以使用 v-model 多個依然需要使用 .sync
3、 $parent和 $children
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1 ├── Grandson1.vue //孫子1
代碼結(jié)構(gòu)
如下場景:孫子想要給爺爺傳遞數(shù)據(jù),孫子需要找到爺爺身上的事件去傳遞 $parent.$emit
<template>
<div>
<div>孫子{{value}}</div>
<button @click="$parent.$emit('change',3)">修改</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: "",
},
},
};
</script>
兒子組件使用孫子組件
<template>
<div>
<div>兒子:{{value}}</div>
<grandson1 :value="value"></grandson1>
</div>
</template>
<script>
import grandson1 from "./grandson1";
export default {
components: {
grandson1,
},
props: {
value: {
type: Number,
default: 1,
},
},
};
</script>
爸爸身上給孫子自定義change事件
<template>
<div>
<div>爸爸:{{value}}</div>
<Son1 @change="val=>value=val" :value="value"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
value: 1,
};
},
};
</script>
如果層級很深那么就會出現(xiàn) $parent.$parent..... 我們可以封裝一個 $dispatch 方法向上進(jìn)行派發(fā)
Vue.prototype.$dispatch = function $dispatch(eventName, data) {
let parent = this.$parent;
while (parent) {
parent.$emit(eventName, data);
parent = parent.$parent;
}
};
相同的道理，如果既然能夠向上尋找父親，就能向下尋找兒子，也可以封裝一個向下派發(fā)的方法 $broadcast
Vue.prototype.$broadcast = function $broadcast(eventName, data) {
const broadcast = function () {
this.$children.forEach((child) => {
child.$emit(eventName, data);
if (child.$children) {
$broadcast.call(child, eventName, data);
}
});
};
broadcast.call(this, eventName, data);
};
4、 $attrs和 $listeners
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1 ├── Grandson1.vue //孫子1
$attrs 批量向下傳入屬性
<template>
<div>
<div>爸爸:{{value}}</div>
<Son1 @change="val=>value=val" :value="value"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
value: 1,
};
},
};
</script>
在兒子組件中使用 $attrs屬性,配合 v-bind 可以將屬性繼續(xù)向下傳遞
<template>
<div>
<div>兒子:{{$attrs.value}}</div>
<grandson1 v-bind="$attrs"></grandson1>
</div>
</template>
<script>
import grandson1 from "./grandson1";
export default {
components: {
grandson1,
},
mounted() {
console.log(this.$attrs);
},
};
</script>
注意一點：在使用 $attrs的時候，如果組件中使用了 props 就會將屬性從當(dāng)前 attrs 移除掉
在孫子組件中使用 $attrs屬性,可以將屬性繼續(xù)向下傳遞
<template>
<div>
<div>孫子{{$attrs.value}}</div>
</div>
</template>
<script>
export default {
//props: {
// value: Number,
//},
mounted() {
console.log(this.$attrs);
},
};
</script>
如果爸爸傳遞給兒子元素, 兒子有三個屬性用不到， 孫子傳遞給孫子，但是不想在頁面上這個屬性，可以設(shè)置 inheritAttrs: false
$listeners 批量向下傳入方法
<template>
<div>
<div>爸爸:{{value}}</div>
<Son1 @click="change" :value="value"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
value: 1,
};
},
methods: {
change() {
this.value = 2;
},
},
};
</script>
可以在son1組件中使用 $listeners 屬性,配合 v-on 可以將方法繼續(xù)向下傳遞
<template>
<div>
<div>兒子:{{$attrs.value}}</div>
<grandson1 v-bind="$attrs" v-on="$listeners"></grandson1>
</div>
</template>
<script>
import grandson1 from "./grandson1";
export default {
components: {
grandson1,
},
mounted() {
console.log(this.$attrs);
console.log(this.$listeners);
},
};
</script>
孫子組件可以直接使用 $listeners 上的方法
<template>
<div>
<div>孫子{{$attrs.value}}</div>
<button @click="$listeners.click"></button>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$attrs);
console.log(this.$listeners);
},
};
</script>
5、Provide & Inject
目錄結(jié)構(gòu)
app.vue components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1 ├── Grandson1.vue //孫子1
代碼結(jié)構(gòu)
在父級聲明一個公共數(shù)據(jù)
export default {
provide() {
return { vm: this };
},
};
在子組件中可以注入原理,會將數(shù)據(jù)掛載在當(dāng)前實例上
<template>
<div>
<div>孫子</div>
</div>
</template>
<script>
export default {
inject: ["vm"],
mounted() {
console.log(this);
},
};
</script>
注意事項:這個方法使用之后比較混亂,它一般 不會在業(yè)務(wù)代碼中使用 ,經(jīng)常是在組件庫或者多級通信,為了方便你可以使用 provide 。
6、ref
目錄結(jié)構(gòu)
components ├── Parent.vue // 父親 ├── Son1.vue // 兒子1
代碼結(jié)構(gòu)
ref 獲取的是真實的dom元素，如果放到組件上代表的是 當(dāng)前組件的實例 。 父組件中可以直接獲取子組件的方法或者數(shù)據(jù)。
<template>
<div>
<div>爸爸</div>
<Son1 ref="son"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
mounted() {
this.$refs.son.show();
},
};
</script>
<template>
<div>
<div>兒子</div>
</div>
</template>
<script>
export default {
methods: {
show() {
console.log(1);
},
},
};
</script>
注意事項: ref 不要 重名 , 但是當(dāng)且僅當(dāng)使用 v-for 的時候會導(dǎo)致出現(xiàn) 數(shù)組 情況
7、EventBus
目錄結(jié)構(gòu)
main.js components ├── Grandson1.vue // 孫子1 ├── Son2.vue // 兒子2
代碼結(jié)構(gòu)
EventBus 可用于 跨組件 通知(不復(fù)雜的項目可以使用這種方式)
Vue.prototype.$bus = new Vue();
Grandson1組件和Son2相互通信
<template>
<div>孫子1</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
this.$bus.$emit("test", "go");
});
},
};
</script>
這里的兒子2組件只能使用 $on 來觸發(fā)Grandson1組件事件
<template>
<div>兒子2</div>
</template>
<script>
export default {
mounted() {
this.$bus.$on("test", (data) => {
console.log(data);
});
},
};
</script>
8、Vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
結(jié)尾
到此這篇關(guān)于八種Vue組件間通訊方式合集(推薦)的文章就介紹到這了,更多相關(guān)八種Vue組件間通訊方式合集(推薦)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue引入高德地圖并繪制點線面的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
vscode中prettier和eslint換行縮進(jìn)沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進(jìn)沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了Vue-cli搭建spa項目的項目實踐,首先,你需要安裝Vue CLI,然后通過它創(chuàng)建新項目,接著,選擇和配置適當(dāng)?shù)牟寮鸵蕾図?以完善你的SPA項目,感興趣的可以了解一下2023-09-09
組件（Component）是 Vue.js 最強(qiáng)大的功能之一，之前的文章都只是用到了基本的封裝功能，這次將介紹一些更強(qiáng)大的擴(kuò)展。這篇文章主要介紹了Vue.js實戰(zhàn)之組件進(jìn)階的相關(guān)資料，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-04-04
Vue3全局掛載使用Axios學(xué)習(xí)實戰(zhàn)
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學(xué)習(xí)實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 實現(xiàn)Web端的定位功能 獲取經(jīng)緯度
這篇文章主要介紹了vue 實現(xiàn)Web端的定位功能獲取經(jīng)緯度，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴}
這篇文章主要介紹了ant?design?vue?pro?支持多頁簽?zāi)Ｊ絾栴},具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue3.0 自己實現(xiàn)放大鏡效果案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
vue3使用threejs實現(xiàn)3D卡片水平旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實現(xiàn)3D卡片水平旋轉(zhuǎn)效果,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04