eventhub 是乙個非常重要且常用的東西,在不相關元件通訊方面有著很強大的作用。
想想如果從最頂層元件傳乙個 data 給最底層元件,僅僅使用父子傳遞的方式會變得十分麻煩。
而 eventhub 就是用來解決這個問題的:在需要獲取 data 的元件上設定乙個***,每次要傳遞 data 時,那個元件就廣播這個事件並呼叫這些***。我們不難發現 eventhub 的主要功能就兩個:監聽和廣播,當然還有去掉***。而 vue 剛好給我們提供了這些功能,我們可以使用 vue 來描述這些功能:
let eventhub = new vue()
// 監聽
eventhub.$on('eventname', (data) => )
// 廣播
eventhub.$emit('eventname', data)
// 去掉監聽
eventhub.$off('eventname')
有沒有感覺很優雅呢?其實本質上這裡就借用了 vue 的事件監聽功能來完成 eventhub 的。
優雅是優雅,但是這明顯是個全域性變數呀,難道我們要將它放在入口 main.js 裡面初始化麼?還是放在vue.prototype
裡直接用this.eventhub
來使用呢?no no no,vue 給我們提供了乙個更簡潔的寫法:依賴注入。
在頂層元件的data
裡初始化 eventhub,並使用provide
對外暴露這個 eventhub。
import vue from "vue";
export default ,
data() ;
},provide() ;
},methods:
}};
然後在需要監聽的元件裡用inject
注入這個依賴,並在created
裡新增事件監聽。
export default ;
},created() );
}};
最終的結果是在需要監聽的元件裡修改msg
,新增監聽事件的子元件都會獲取最新的msg
,並用其再更新自己的資料或者狀態。 Vue元件傳值 父子元件傳值
父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...
Vue元件傳值
學習vue的傳值心得,剛入門vue,大佬勿噴,請多多指教。1.父元件傳值子元件 父元件巢狀子元件式,在標籤裡繫結 子元件用props屬性接收 例 父元件傳值,為縮寫,等同於v bind obj item props obj count 子元件接收傳值,可直接使用,但是推薦在下方重新賦值給新變數再使用...
Vue 元件傳值
一 父子元件傳值 在引用元件中被引用元件為子元件 1.父元件給子元件傳值 傳遞方法 傳遞類 在父元件中引用header子元件 homemsg msg 把父元件中的msg傳給子元件 在子元件中用props homemsg 接收,然後就可以用 給介面賦值 run run run是乙個方法,也可以把方法傳...