第一种:单独文件

第一种是分开单独文件,需要用到 bus 的每个文件单独 import 一次.

Bus.js

添加一个 Bus.js 文件,里面代码如下:

import Vue from 'vue';
export default new Vue();
1
2

组件 1

import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
  methods: {
        ....
        Bus.$emit('log', 120)
    },

  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

组件 2

import Bus from './Bus'

export default {
    data() {
        return {
            .........
            }
      },
    mounted () {
       Bus.$on('log', content => {
          console.log(content)
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第二种:根文件

main.js

直接将 Bus 注入到 main.js 的 Vue 根对象中,然后在子组件中通过 this.$root.Bus.$on(),this.$root.Bus.$emit()来调用.

import Vue from 'vue';
const Bus = new Vue();

var app = new Vue({
  el: '#app',
  data: {
    Bus
  }
});
1
2
3
4
5
6
7
8
9

TOC