今天的越寫悅快樂之系列文章為大家?guī)鞻ue項目如何集成EventBus肖爵。有過Vue開發(fā)經(jīng)驗的小伙們都知道，多個組件之間進(jìn)行數(shù)據(jù)的傳遞或者共享在Vue項目中很是常見惭缰，我們?nèi)绾卧诓灰?code>Vuex的情況下該如何共享數(shù)據(jù)呢减牺？今天的文章我為大家?guī)磉@篇文章，希望大家喜歡愈案。
Event是什么
- Event是
HTML中DOM對象中事件的狀態(tài)，它可以觸發(fā)頁面元素的行為鹅搪，比如鼠標(biāo) / 鍵盤屬性站绪、事件句柄、以及多個瀏覽器支持的標(biāo)準(zhǔn)Event事件丽柿。 - 在Vue中表示一個Vue實例的方法恢准，比如
$on、$off甫题、$emit等
開發(fā)環(huán)境
- Window 10.0.17763
- Node 10.15.3
- Yarn 1.16.0
- Vue 2.6.10
接入步驟
添加依賴
- CDN方式
<!-- development version -->
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.js"></script>
<!-- production version -->
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.min.js"></script>
- NPM方式
npm install vue-bus --save
- YARN方式
yarn add vue-bus -S
引入
我們在項目的入口文件src/main.js中使用Vue.use()來掛載到Vue對象上馁筐，可參考如下寫法：
import Vue from 'vue'
import VueBus from 'vue-bus'
Vue.use(VueBus)
使用
最后我們在組件文件Event.vue中提供的方法（組件生命周期）中聲明和監(jiān)聽Bus，下面給出一個完整的Vue組件的定義：
<template>
<div>
<van-nav-bar
:title="pageTitle"
fixed/>
</div>
</template>
<script>
import { NavBar, Toast } from 'vant'
export default {
name: 'Event',
components: {
[NavBar.name]: NavBar,
[Toast.name]: Toast
},
data() {
return {
// 頁面標(biāo)題
pageTitle: '我',
}
},
created() {
this.$bus.on('add-todo', this.addTodo);
},
beforeDestroy() {
this.$bus.off('add-todo', this.addTodo);
},
methods: {
addTodo() {
this.$bus.emit('add-todo', { text: this.newTodoText });
this.newTodoText = '';
}
}
}
</script>
<style lang="less" scoped>
.van-cell-group {
margin-top: 48px;
}
</style>
那我們在組件創(chuàng)建和銷毀的過程中檢測到addTodo方法的調(diào)用坠非，也就是精確控制頁面的行為敏沉。
參考
當(dāng)然我們也可以從Vue中創(chuàng)建一個Bus對象，然后綁定到一個Vue實例上，然后在組件中使用
this.$bus.on方法來注冊事件盟迟。
個人收獲和感想
通過以上知識點的梳理秋泳，我們知道了父子組件之間如何進(jìn)行數(shù)據(jù)通信，以及不同組件之間如何共享數(shù)據(jù)攒菠，并通過合適的架構(gòu)設(shè)計來保證業(yè)務(wù)中數(shù)據(jù)的共享和流動轮锥，同時為后續(xù)的升級迭代提供可擴(kuò)展的支持和平滑升級，我相信除了這種方式外要尔，也會有其它數(shù)據(jù)通信的方式舍杜，在前端領(lǐng)域不斷更新變化的時代，我們只有深入底層理解原理赵辕，再加上一定經(jīng)驗的實踐會給我們業(yè)務(wù)的發(fā)展提供充分有力的保障既绩，更能打破信息壁壘，通過不同層次的學(xué)習(xí)方式來努力提升技術(shù)水平还惠，構(gòu)建更加穩(wěn)定安全的產(chǎn)品或者服務(wù)饲握，我相信產(chǎn)品的最大價值就是為用戶不斷創(chuàng)造價值，對此我深信不疑蚕键，更希望大家保持學(xué)習(xí)的熱情救欧，完善自己的知識技術(shù)體系，打造屬于我們自己的平臺或者產(chǎn)品锣光。若是我的文章對你有所啟發(fā)笆怠，那將是我莫大的榮幸。
