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>