Bus · vue筆記

[TOC] >[success] # Bus **Vuex** 適合 **大型復雜項目** 中使用，進行 **狀態管理**，我們的項目如果不是很復雜可以使用 **Bus** 來滿足需求。 >[success] ## 父子組件傳值 **父傳子**：*通過在使用子組件的標簽上定義自定義屬性* 。 **子傳父** ： *在子組件中使用this.$emit傳給父組件，然后在父組件中通過自定義事件接收子組件傳過來的值* 。 **vue** 的 **父子組件傳值** 是通過 **單項數據流** ，[官方不推薦在子組件中修改父組件傳過來的props的值](https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81)，**避免這個參數多個子組件引用，無法找到造成數據不正常的原因** 。 1. **子組件** 寫法： **AInput.vue** ~~~ <template> <input @input="handleInput" :value="value"> </template> <script> export default { name: 'AInput', props: { value: { type: [String, Number], default: '' } }, methods: { handleInput(event){ const value = event.target.value // 獲取input的值 this.$emit('input', value) // 把value傳給父組件 } } } </script> ~~~ 2. **父組件** 寫法 **store.vue** ~~~ <template> <div>  <a-input v-model="inputValue"/> <p>{{ inputValue }}</p> </div> </template> <script> import AInput from '_c/AInput' // _c對應的是src/components文件夾，是vue.config.js中配置的 export default { name: 'store', data(){ return{ inputValue: '' } }, components: { // AInput: AInput, // 啰嗦方式 AInput // 簡寫方式 } } </script> ~~~ 上面代碼 **父組件** 中的 **v-model** 實際上是一個 **語法糖** ，跟下面這種寫法一樣： ~~~ <template> <div> <a-input :value="inputValue" @input="handleInput"/> <p>{{ inputValue }}</p> </div> </template> <script> import AInput from '_c/AInput' export default { name: 'store', data(){ return{ inputValue: '' } }, components: { AInput }, methods:{ handleInput(val){ this.inputValue = val } } } </script> ~~~ >[success] ## 兄弟組件傳值接下來是 **子組件1** 給 **子組件2** 傳值，這兩個組件是 **兄弟級組件（同級組件）** 。 1. **父組件** 寫法： **store.vue** ~~~ <template> <div>  <a-input v-model="inputValue"/>  <a-show :content="inputValue"/> </div> </template> <script> import AInput from '_c/AInput' import AShow from '_c/AShow' export default { name: 'store', data(){ return{ inputValue: '' } }, components: { AInput, AShow } } </script> ~~~ 或者這樣寫： ~~~ <template> <div>  <a-input @input="handleInput"/>  <a-show :content="inputValue"/> </div> </template> <script> import AInput from '_c/AInput' import AShow from '_c/AShow' export default { name: 'store', data(){ return{ inputValue: '' } }, components: { AInput, AShow }, methods:{ handleInput(val){ this.inputValue = val } } } </script> ~~~ 2. **子組件1** 寫法： **AInput.vue** ~~~ <template> <input @input="handleInput" :value="value"> </template> <script> export default { name: 'AInput', props: { value: { type: [String, Number], default: '' } }, methods: { handleInput(event){ const value = event.target.value // 獲取input的值 this.$emit('input', value) // 把value傳給父組件 } } } </script> ~~~ 3. **子組件2** 寫法： **AShow.vue** ~~~ <template> <div> <p> AShow:{{ content }} </p> </div> </template> <script> export default { name: 'AShow', props: { content: { type: [String, Number], default: '' } } } </script> ~~~ >[success] ## Vue Bus方式傳值（跨文件的組件傳值）下面用到的[$on、$emit、$once、$off使用方法](https://juejin.im/post/6844904062417109005) 1. 首先創建在 **src目錄** 下的 **lib文件夾** 并且在其中創建 **bus.js** **src/lib/bus.js** ~~~ import Vue from 'vue' const Bus = new Vue() export default Bus ~~~ 2. 在 **main.js** 中 **引入全局Bus** ，其實這種方式有點跟在 **window**上掛載 **方法或變量** 有點相似。 **main.js** ~~~ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import './plugins/element.js' import Bus from './lib/bus' // 引入Bus Vue.config.productionTip = false Vue.prototype.$bus = Bus // 掛載Bus到Vue原型鏈（全局掛載Bus） new Vue({ router, store, render: h => h(App) }).$mount('#app') ~~~ 3. 在 **email.vue** 中 **set** 一個值 **email.vue** ~~~ <template> <div> <button @click="handleClick">點擊我跳轉tel頁面</button> </div> </template> <script> export default { methods: { handleClick() { this.$router.push({ path: "/tel" }); } }, beforeDestroy(){ // 離開頁面時 this.$bus.$emit('on-click', '把我傳過去') // 使用bus Set值 } } </script> ~~~ 4. 在 **tel.vue** 中 **get** 這個值，并且把值顯示到頁面上 **tel.vue** ~~~ <template> <div>我是tel頁面</div> </template> <script> export default{ created(){ this.$bus.$on('on-click', mes => { // 監聽on-click事件get值 console.log(mes) // 把我傳過去 }) }, beforeDestroy(){ // 頁面離開時 this.$bus.$off('on-click') // 銷毀監聽事件（監聽事件不會自動銷毀），如果不銷毀，事件會多次執行 } } </script> ~~~ 5. **原理** ： **$emit方法** 會 **觸發當前實例上的一些事件** ， **$on** 給 **指定事件** 綁定一個 **事件監聽** ，同樣也可以在自己的頁面監聽自定義事件，如下： **store.vue** ~~~ <template> <div> <button @click="handleClick">按我</button> </div> </template> <script> export default { methods: { handleClick(){ this.$emit('on-click', '111') // 自定義事件 } }, mounted(){ this.$on('on-click', mes => { // 監聽自定義事件 console.log(mes) // 111 }) } } </script> ~~~ 6. **Bus** 必須要在 **beforeDestroy** 中執行 **Set** 操作。如果在 **點擊方法** 中 **set** 值后跳轉到 **get** 值的頁面，**get** 值的頁面 **未渲染完成** 就會 **監聽不到Bus** ，[解決方案](https://segmentfault.com/a/1190000021053767) 。 >[warning] ## 后期補充(該項后期刪除) 1. **v-model** 的 **語法糖** ，如果子組件傳給父組件多個值怎么辦