使用bus.js来进行组件中简单的通信

1、首先建立一个bus.js

2、在bus.js里面填上如下信息

import Vue from 'vue'

const bus = new VUe()
export default bus

3、在需要通信的组件中引入bus.js

import Bus from './bus.js'

4、组件通信

 

import Bus from './bus.js' 
export default { 
    data() {
        return {
            message: ''"
        }
     },
  methods: {
       bus () {
          Bus.$emit('msg', '我要传给兄弟组件们,你收到没有')
       }
    }
}

5、打开要和$emit通信的另外一个组件  添加



import Bus from './bus.js'
export default {
    data() {
      return {
        message:  ''
      }
    },
    mounted() {
    let self = this
       Bus.$on('msg', (e) => {
         self.message = e
     console.log(`传来的数据是:${e}`)
       })
     }
   }

 

你可能感兴趣的:(前端)