Vue使用$emit / $on 进行组件通信

第一步:创建一个js文件,引入vue,并返回一个vue实例

import Vue from 'vue'
export default new Vue()

第二步:在main.js中引入这个js文件,并将其挂在到vue原型上

import tool from '@/assets/tool.js'
Vue.prototype.Event = tool

第三步:在父组件中向子组件或兄弟组件传递参数如下

this.Event.$emit('事件名','参数')

 例:this.Event.$emit('data-a','李云龙')

第四步:需要在子组件中或兄弟组件 created 或者 mounted 中接收参数

created(){
    this.Event.$on('事件名', v => { })
}
例:
  created(){
    this.Event.$on('data-a', v => {console.log(v,'这就是参数')})
  }

注:子组件向传父和兄弟传递参数,同父传子方法一样,这点就不在举例说明了

原文地址:https://www.cnblogs.com/tlfe/p/14037464.html