首页vue3 emit defineEmits

vue3 emit defineEmits

时间: 2024-04-03 18:29:38 浏览: 92

在Vue 3中，emit和defineEmits是用于实现组件之间通信的重要特性。

emit是一个函数，用于在子组件中触发自定义事件，并向父组件传递数据。通过在子组件中使用this.$emit方法，可以触发一个自定义事件，并将数据传递给父组件。父组件可以通过监听子组件的自定义事件来接收数据。

defineEmits是一个选项，用于在组件中声明可触发的自定义事件。通过在组件的选项中使用defineEmits，可以明确指定组件可以触发哪些自定义事件。这样做的好处是可以提供更好的代码提示和类型检查。

下面是一个示例代码，演示了如何使用emit和defineEmits：

// 子组件 Child.vue
<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['customEvent'], // 声明可触发的自定义事件
  methods: {
    handleClick() {
      this.$emit('customEvent', 'Hello from child component'); // 触发自定义事件，并传递数据给父组件
    }
  }
}
</script>

// 父组件 Parent.vue
<template>
  <div>
    <p>{{ message }}</p>
    <Child @customEvent="handleCustomEvent" /> <!-- 监听子组件的自定义事件 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data; // 接收子组件传递的数据
    }
  }
}
</script>