javascript
发布了个'自定义事件':'你好，世界！';

html
    触发事件</button>
export default {
  methods:{
    handleEvent(data){
      console.log('接收到数据：', data);
    }

  

    触发事件
    
  

}
}
看了这个代码，你会明白怎么在爸爸组件里（emit）触发自己制定的那个探戈信号（custom event），然后让孩子组件收到这个信号，接着处理里面的小秘密数据，这样子就轻松做到组件间沟通！
二、自定义事件的常见场景
1.父子组件之间的通信
父子组件间传数据用自定义事件太方便了！把信息交给子组件让它处理，然后再通过自己定义的玩意儿回传给父组件。这招儿特别实用，尤其是遇到层级复杂的嵌套组件时，能让我们轻松搞定数据传输和交互。
2.兄弟组件之间的通信
要让两个没直接关联的组件交流信息，用上Vue的“事件总线”就行了。就是先搞个空白的Vue实例当信号站，再用$emit跟$vnode.$on俩功能，就能搞定组件间沟通问题。
下面是一个简单示例：
//创建一个空的Vue实例作为事件总线
const bus = new Vue();
//组件A触发自定义事件并传递数据
发射个"自定义事件"，改成：bus.$emit('customEvent','世界！');
//组件B监听自定义事件并获取数据
当我们的Bus产生自定义事件时，只需在`bus.$on()`后指定函数就能搞定。然后会有个名为`data`的东西传进来供你处理！
console.log('接收到数据：', data);
});

  

    触发事件
  


import eventBus from './eventBus';
export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('custom-event', 'Hello, world!');
    }
  }
}


  

    
组件B
  


import eventBus from './eventBus';
export default {
  mounted() {
    eventBus.$on('custom-event', data => {
      console.log(data); // 输出：Hello, world!
    })
  }
}

import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

这样一来，即便这俩兄弟组件没啥直接交集，照样能用这个事件总线大带宽来聊天，完成互相帮忙的事儿。
3.跨级组件之间的通信
Vue有个叫provide/inject的API能让你在任何级别的组件里交流信息。就跟给父母钱一样，用provide在父级组件里给点钱，再用inject在子级组件里收上来，这样就可以像玩儿接龙游戏一样在不同的级别间传递信息~这个方法特别适合那些页面复杂或者多层次嵌套的情况！
以下是一个简单示例：
vue

const SharedData ={

provide(){

return {

message:’Hello, world!’

};

  

    
父组件提供的数据：{{ data }}
    
  


export default {
  provide() {
    return {
      data: 'Hello, world!'
    }
  }
}


  

    
子组件注入的数据：{{ injectedData }}
    
  


export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}


  

    
孙子组件注入的数据：{{ injectedData }}
  


export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}

};

inject:[‘message’],

上例里，爸比级别的组件提供了个叫做”Hello, world!”的东西出来，然后小辈们就可以用 inject 这个东东把它吸进去，从而实现父子交流，超级简单！

三、总结与展望

这篇文章给你讲明白什么是Vue里的自定义事件，怎么用它以及这些功能在哪些地方能用得上。通过自定义事件的方式，我们轻松搞定组件间的多样且快速的沟通。

希望这篇文章能帮到你~以后用Vue做项目，就更溜了！要是还有啥不明白、想聊聊的话题，记得留言。