【Vue】Vue3的emits方法

时间：2025-04-08 07:57:43

1、简介

  • Vue 3中的emits方法主要用于在子组件中声明它可以触发的事件，这些事件可以被父组件监听和处理。
  • emits方法不仅提供了一种组件间通信的方式，还允许开发者在子组件中定义事件的验证规则，确保事件传递的数据符合预期。

2、基本用法

  • 在Vue 3中，emits可以通过两种方式使用：在<script>标签的export default对象中直接使用，或者在<script setup>标签中使用defineEmits编译器宏。
2.1 在<script>标签中使用

在<script>标签中，emits可以是一个数组或对象。数组形式简单列出子组件可能触发的所有事件名；对象形式则允许为每个事件指定验证函数。

  • 数组形式：

export default {  
  emits: ['update', 'delete'],  
  // ... 其他选项  
}
  • 对象形式：
export default {  
  emits: {  
    // 无验证函数  
    update: null,  
    // 有验证函数  
    delete: (payload) => {  
      if (typeof payload === 'number') {  
        return true;  
      } else {  
        ('Invalid delete event payload');  
        return false;  
      }  
    }  
  },  
  // ... 其他选项  
}

2.2 在<script setup>标签中使用defineEmits
  • 在<script setup>中，defineEmits用于声明组件的emits。与在<script>标签中直接声明不同，defineEmits是一个编译器宏，只能在<script setup>中使用。
<script setup>  
import { defineEmits } from 'vue';  
  
const emit = defineEmits(['update', 'delete']);  
  
function handleClick() {  
  emit('update', { id: 1, name: 'New Name' });  
  // 或者  
  emit('delete', 123);  
}  
</script>

3. 事件触发

  • 无论使用哪种方式声明emits，触发事件的方式都是通过组件实例的$emit方法。在Vue 3中，这通常是在组件的方法中完成的。
export default {  
  methods: {  
    someMethod() {  
      this.$emit('some-event', { /* 数据 */ });  
    }  
  }  
}  
  
// 或者在 <script setup> 中  
<script setup>  
import { defineEmits } from 'vue';  
  
const emit = defineEmits(['some-event']);  
  
function someMethod() {  
  emit('some-event', { /* 数据 */ });  
}  
</script>

4. 父组件监听

  • 在父组件中，可以通过v-on指令（或其简写形式@）来监听子组件触发的事件。
<template>  
  <ChildComponent @update="handleUpdate" @delete="handleDelete" />  
</template>  
  
<script>  
import ChildComponent from './';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleUpdate(payload) {  
      // 处理更新事件  
    },  
    handleDelete(id) {  
      // 处理删除事件  
    }  
  }  
}  
</script>

相关文章