溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在Vue項目中如何使用dispatch與boradcast？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
1.mixins（混入）
我所理解的mixins就是共享，就好比面向對象里面的原型prototype那種感覺的東西，把相同的邏輯抽離出來便于維護。
先來看下src目錄結構
src ├─ components │ ├─ A │ │ └─ index.vue │ ├─ B │ │ └─ index.vue ├─ minixs │ ├─ emitter.js //這個是要混入的js ├─ store │ └─ index.js ├─ views │ └─ Home.vue ├─ App.vue └─ main.js
2.emitter.js
//從外層向內(nèi)層
function broadcast(componentName,eventName,params){
this.$children.forEach(child=> {
const name = child.$options.name;
if(name === componentName)
{
child.$emit.call(child,eventName,params)
}else
{
broadcast.call(child,componentName,eventName,params)
}
});
}
export default {
data(){
return{}
},
methods: {
dispatch(conponentName,eventName,params){
let parent = this.$parent || this.$root;
let name = parent.$options.name;
while(parent && (!name || name !==conponentName))
{
parent = parent.$parent;
if(parent)
{
name = parent.$options.name;
}
}
if(parent)
{
parent.$emit.call(parent,eventName,params)
}
},
broadcast(componentName, eventName, params){
broadcast.call(this, componentName, eventName, params);
}
}
}methods 里定義的 dispatch 和 broadcast 方法會被混合到組件里，自然就可以用 this.dispatch 和 this.broadcast 來使用。
這兩個方法都接收了三個參數(shù)，第一個是組件的 name 值，用于向上或向下遞歸遍歷來尋找對應的組件，第二個和第三個就是上文分析的自定義事件名稱和要傳遞的數(shù)據(jù)。
可以看到，在 dispatch 里，通過 while 語句，不斷向上遍歷更新當前組件（即上下文為當前調用該方法的組件）的父組件實例（變量 parent 即為父組件實例），直到匹配到定義的 componentName 與某個上級組件的 name 選項一致時，結束循環(huán)，并在找到的組件實例上，調用 $emit 方法來觸發(fā)自定義事件 eventName。broadcast 方法與之類似，只不過是向下遍歷尋找。
3.具體的使用
A是B的父組件
//🌵組件A
<template>
<div class="main">
<button class="btn" @click="handleClick">父組件A---觸發(fā)事件</button>
<B></B>
</div>
</template>
<script>
import B from '../B';
import emitter from '@/minixs/emitter';
export default {
name: 'A',
data() {
return {};
},
//測試dispatch
created() {
this.$on('on-message', this.showMessage);
},
mixins: [emitter],
components: {
B,
},
methods: {
//broadcast測試
handleClick() {
this.broadcast('B', 'on-click', 'Hello Vue.js');
},
showMessage(msg) {
alert(msg);
},
},
};
</script><template>
<div class="b">
我是子組件B
<button @click="dispatchtest">dispatch發(fā)射~！🚀</button>
</div>
</template>
<script>
import emitter from '@/minixs/emitter';
export default {
name: "B",
mixins: [emitter],
created() {
this.$on('on-click', this.showMessage);
},
methods: {
showMessage(text) {
window.alert(text);
},
//dispatch派發(fā)測試
dispatchtest() {
this.dispatch("A", "on-message", "我就是全宇宙最善良的仔~！")
}
}
}
</script>效果圖：
看完上述內(nèi)容，你們掌握在Vue項目中如何使用dispatch與boradcast的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
