Vue 中如何从子组件发出自定义事件？

在 Vue 中，子组件可以通过 $emit 方法发出自定义事件，父组件可以监听这些事件并作出相应的处理。

在子组件中发出自定义事件：

<template>
  <button @click="emitCustomEvent">发出事件</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      // 发出名为 'custom-event' 的自定义事件，并传递数据
      this.$emit('custom-event', 'Custom event emitted!');
    },
  },
};
</script>

在父组件中监听自定义事件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(data) {
      // 处理从子组件发出的自定义事件
      console.log('Received custom event:', data);
    },
  },
};
</script>

在子组件中使用 $emit 方法触发自定义事件，并传递需要的数据。在父组件中通过在子组件标签上使用 @eventName 的方式监听并捕获自定义事件，当子组件触发事件时，父组件中的相应处理函数就会被调用。

在自定义事件中可以传递任意数据作为参数，父组件中可以接收到这些数据，并根据需要进行处理。

Was this helpful?

0 / 0