Vue自定义事件(详解)

什么是自定义事件

Vue中除了系统事件（如：click、change、input等），用户也可以自定义事件。自定义事件可以通过$emit来触发，在组件树中向上传递数据，被其它组件接收并响应处理。

如何使用自定义事件

在父组件中触发自定义事件

• 示例1：利用$emit触发自定义事件

<template>
  <div>
    <my-component @myEvent="handleCustomEvent"></my-component>
  </div>
</template>

<script>
import MyComponent from '路径'
export default {
  components: {
    MyComponent
  },
  methods: {
    handleCustomEvent(data) {
      // 处理自定义事件数据
      console.log('自定义事件被触发，这是传递的自定义数据', data)
    }
  }
}
</script>

• 示例2：$emit触发自定义事件并传递数据

<template>
  <div>
    <my-component @myEvent="handleCustomEvent"></my-component>
  </div>
</template>

<script>
import MyComponent from '路径'
export default {
  components: {
    MyComponent
  },
  methods: {
    handleCustomEvent(data) {
      // 处理自定义事件数据
      console.log('自定义事件被触发，这是传递的自定义数据', data)
    },
    handleClick() {
      // 点击按钮触发自定义事件并传递数据
      this.$emit('myEvent', {name: 'Vue', age: 3})
    }
  }
}
</script>

在子组件中响应自定义事件

• 示例3：利用$emit在子组件中触发自定义事件并传递数据

<template>
  <div>
    <button @click="handleClick">点击触发自定义事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 点击按钮触发自定义事件并传递数据
      this.$emit('myEvent', {name: 'Vue', age: 3})
    }
  }
}
</script>

• 示例4：监听父组件中的自定义事件

<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    handleCustomEvent(data) {
      // 处理父组件传递过来的自定义事件数据
      console.log('自定义事件被触发,这是传递的自定义数据', data)
      this.msg = data.name + '已经' + data.age + '岁了'
    }
  },
  mounted() {
    // 在父组件中绑定自定义事件
    this.$parent.$on('myEvent', this.handleCustomEvent)
  },
  beforeDestroy() {
    // 在父组件中销毁自定义事件
    this.$parent.$off('myEvent', this.handleCustomEvent)
  }
}
</script>

总结

自定义事件是Vue中非常常见的一种机制，它可以方便组件的通信和数据传递。在开发过程中，我们可以利用这种机制来解决多层级组件之间大量的数据传递和处理问题。