Vue中的 Bus使用

2021-10-03 00:13:03 字數 722 閱讀 1502

bus.js

import vue from 'vue';

let bus = new vue();

export default bus;

建立兩個兄弟組建

c2.vue

c1.vue

c1

index.vue

注意:這種引入方式,經過webpack打包後可能會出現bus區域性作用域的情況,即引用的是兩個不同的bus,導致不能正常通訊

main.js

// 將掛載到prototype單獨抽離成乙個檔案

import plugin from './util/bus';

vue.use(plugin);

./util/bus.js

import bus from 'vue';

let install = function (vue)

export default ;

c2.vue

c1.vue

c1

參考文章:

Vue中的事件匯流排 bus

在vue中,我們父子之間通訊簡單明瞭 父元件向子元件傳值 props,在父元件中,用 要傳遞過去的名字 要傳遞的值 在子元件中 使用props 接受即可 子元件向父元件傳值 emit.通過自定義方法,在子元件中,我們使用this.emit 方法名 引數 向父元件傳值 在父元件中,我們使用子元件傳遞過...

vue專案裡使用bus傳值

首先建立乙個bus.js的檔案,在此檔案裡操作 import vue from vue const bus new vue export default bus 然後在main.js檔案裡匯入 import eventbus from bus.js vue.use eventbus vue.prot...

Vue傳值 bus匯流排機制

眾所周知,vue提供了很多套元件間傳值的方法,父子元件直接用props和 emit就好,大型專案則用vuex,但有一種更適合在小專案中使用的非父子元件傳值方法,即bus匯流排機制。它的用法的實現原理是前端面試中常考的。在第一次換工作的時候,幾乎所有面試官都問了有關vue元件傳值的幾種方法,所以掌握這...