Vue 兄弟或父子组件传值的一种方法，通过Vue的$emit发送事件，$on接收事件

心已赠人 2022-05-15 13:49 85阅读 0赞

通过Vue的$emit发送自定义事件，在需要使用的组件中接收

**$emit**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_27_color_FFFFFF_t_70][]

**$on**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_27_color_FFFFFF_t_70 1][]**

**（0）创建文件 eventBus.js**

import Vue from 'vue'
    const eventBus = new Vue()
    
    export { eventBus }

(1) 组件一中，在事件中触发 eventBus.$emit('buy-number',this.inputNum)

//示例：在Vuewatch 中监听本页面的input的value，然后传值给另一个组件
     watch: {
        inputNum () {
          this.$emit('on-change',this.inputNum);
           eventBus.$emit('buy-number',this.inputNum)
        }
      },

（2）组件二中，事件捕获 使用

//示例：在mounted中一直获取
    mounted () {
        eventBus.$on('buy-number', (Num) => {
          console.log('choose传值', Num)
        })
      }

**运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_27_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_27_color_FFFFFF_t_70]: /images/20220503/77c66340f38d4034b045c577807544fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_27_color_FFFFFF_t_70 1]: /images/20220503/289fe32d6e8b44a98bdcaf0e67b6e6e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_27_color_FFFFFF_t_70 2]: /images/20220503/4812824608204c0aa844e7c89cf87244.png