vue 子组件之间传递 $emit,$on,eventBus

748 阅读1分钟

子组件之间传值

EventBus 称为事件总线

$emit(“事件名称”,“参数”)--------发送事件

$on(“事件名称”,“接收参数”)-------接受事件

EventBus可以是全局创建一个实例,在main.js中Vue.prototype.$eventBus = new Vue(),也可以使用局部引用下面我说的就是局部引用方法

1 首先在src下新建一个eventbus.js文件

2 在子组件1中使用

import eventBus from '../../assets/js/eventBus'
export default {
    	methods:{
        	selectSymbol(data) {
                eventBus.$emit('sym',data.symbol)
            }
        }
}

3 在子组件2中使用

import eventBus from '../../assets/js/eventBus'
export default {
      created(){
          eventBus.$on('sym', (symbolOne) => {
              let _this = this
              if (symbolOne) {
                  _this.symbol = symbolOne
              } 
          })
      }
}