CreateEvent在Vue中的应用

在Vue中，可以使用$emit方法来触发事件，从而在父组件中监听并处理该事件。以下是一个简单的示例：

<!-- ChildComponent.vue --> <template>   <button @click="handleClick">Click me</button> </template>  <script> export default {   methods: {     handleClick() {       this.$emit('custom-event', 'Hello from child component');     }   } } </script> 

<!-- ParentComponent.vue --> <template>   <div>     <ChildComponent @custom-event="handleCustomEvent" />     <p>{{ message }}</p>   </div> </template>  <script> import ChildComponent from './ChildComponent.vue';  export default {   components: {     ChildComponent   },   data() {     return {       message: ''     };   },   methods: {     handleCustomEvent(data) {       this.message = data;     }   } } </script> 

在上面的代码中，子组件ChildComponent中的按钮被点击时，会触发handleClick方法，然后使用$emit方法触发名为custom-event的自定义事件，并传递一个字符串参数。在父组件ParentComponent中，监听了子组件的custom-event事件，并调用handleCustomEvent方法来处理事件传递的参数。最终会在页面上显示出Hello from child component。

这就是在Vue中通过$emit和自定义事件来实现组件间通信的基本方法。