自定义事件

设计之初

在Vue中，自定义事件是一种非常有用的机制，它允许开发人员在组件之间进行通信（组件之间的通信是指不同的Vue组件之间如何交换数据和状态）。适用于：子组件====>父组件

自定义事件的设计可以让开发人员在一个组件中触发一个事件，然后在另一个组件中监听该事件并做出相应的响应。这种机制可以让组件之间的通信更加灵活和高效，因为它可以避免父子组件之间的紧密耦合，同时也可以避免使用全局事件总线等不太优雅的解决方案。

组件之间需要相互通信。在 Vue.js 中，有几种不同的组件通信方式，其中包括 props、事件总线、Vuex 等。自定义事件是其中一种重要的通信方式。

总结

自定义事件是Vue中非常有用的一个特性，它可以让开发人员更加灵活地进行组件之间的通信，从而提高代码的可读性、可维护性和可扩展性。

例子

下面是一个简单的 Vue.js 代码示例，展示了如何使用自定义事件并进行父子组件之间的通信：

父组件（ParentComponent.vue）

<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
    <p>来自子组件的消息: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleChildEvent(message) {
      // 接收到子组件传递的消息，并将其更新到父组件的数据中
      this.message = message;
    },
  },
};
</script>

子组件（ChildComponent.vue）：

<template>
  <div>
    <button @click="notifyParent">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 触发一个自定义事件，将消息传递给父组件
      this.$emit('child-event', 'Hello from child component!');
    },
  },
};
</script>

在这个父组件中，我们使用了 child-component 组件，并通过 @child-event 监听器来监听子组件触发的 child-event 事件。

当我们在子组件中点击对应button时，调用notifyParent方法，该方法会触发自定义事件child-event，而父组件在监听该事件，当事件触发时，它会调用 handleChildEvent 方法，并将传递的消息更新到父组件的 message 数据属性中。这样就实现了：从子组件到父组件的通信或者说数据的传递

使用场景

A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中-父组件中）

绑定自定义事件

绑定

绑定自定义事件的方式主要有以下几种：

• 使用v-on指令或者@简写方式来监听自定义事件

 <Student @myEvent="handleMyEvent">触发自定义事件</Student>

• 使用$on方法来监听自定义事件

<Demo ref="xx">
 ....
  methods:{
  	// 需要的方法
  	testA(){
  		.....
  	}
  }
  mounted(){
  	this.$refs.xx.$on('handleMyEvent',this.testA )
  }

以上两种方法都是在父组件中操作子组件为其绑定自定义事件。第二种方法$on扩展性更强，更灵活，比如可以自由的控制绑定事件

提示

如果想要自定义事件只触发一次，可以使用once修饰符，或$once方法

this.$refs.xx.$once('handleMyEvent',this.testA )

<Student @myEvent.once="handleMyEvent">触发自定义事件</Student>

触发与解绑

事件的触发由绑定了该事件的组件进行触发。（谁绑定事件谁触发）

• 触发自定义事件：this.$emit('EventName',数据)
• 解绑自定义事件：
  • 解绑单个事件this.$off(‘EventName’)
  • 解绑多个自定义事件this.$off(['event1','event2'....])
  • 解绑所有自定义事件this.$off()

注意

组件上也可以绑定原生DOM事件,但需要使用native修饰符，否则仍会识别为自定义事件

<Student @click.native="handleMyEvent">触发自定义事件</Student>

注意：通过this.$refs.xxx.$on(‘customEvent’,回调方法)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

this.$refs.xx.$on('handleMyEvent',(data)=>{
		.....
})