当前位置：首页 > news >正文

vue3中emits

news 来源：原创 2025/6/9 10:47:46

在 Vue 3 中，emits 是一个组件选项，用于声明组件可以触发的自定义事件。这有助于组件间的通信，特别是子组件向父组件传递数据。

以下是 emits 的基本用法和示例：

1. 声明自定义事件

你可以在组件中使用 emits 选项来声明可以触发的事件。

数组形式–数组形式适用于不需要进行参数验证的场景：

export default {
  emits: ['customEvent1', 'customEvent2'],
  methods: {
    triggerEvent1() {
      this.$emit('customEvent1', 'Event 1 triggered');
    },
    triggerEvent2() {
      this.$emit('customEvent2', 'Event 2 triggered');
    }
  }
};

对象形式–对象形式允许你对事件进行更详细的验证：

export default {
  emits: {
    customEvent: (payload) => {
      return typeof payload === 'string';
    }
  },
  methods: {
    triggerEvent() {
      this.$emit('customEvent', 'Valid payload');
    }
  }
};

2. 触发事件

在子组件中，使用 this.$emit 方法触发声明的事件：

<template>
  <button @click="triggerEvent">Trigger Event</button>
</template>

<script>
export default {
  emits: ['customEvent'],
  methods: {
    triggerEvent() {
      this.$emit('customEvent', 'Event triggered');
    }
  }
};
</script>

父组件监听事件在父组件中，使用 v-on 或 @ 指令监听子组件的事件：

<template>
  <child-component @customEvent="handleEvent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log(message); // 输出: 'Event triggered'
    }
  }
};
</script>

4. 使用 defineEmits（组合式 API）

在组合式 API 中，可以使用 defineEmits 函数来定义事件：

<template>
  <button @click="triggerEvent">Trigger Event</button>
</template>

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

const emit = defineEmits(['customEvent']);
// 数组形式
const emitOther = defineEmits(['increment', 'decrement']);

// 对象形式
const emit = defineEmits({
  updateCount: (newCount) => {
    return typeof newCount === 'number';
  }
});
const triggerEvent = () => {
  emit('customEvent', 'Event triggered');
};
</script>

对象形式进行一次完整的表达

<template>
  <button @click="triggerEvent">Trigger Event</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const emit = defineEmits({
  updateCount: (newCount) => {
    return typeof newCount === 'number';
  }
});

const triggerEvent = () => {
  count.value++;
  emit('updateCount', count.value);
};
</script>

TS的写法在 TypeScript 中，你可以使用类型声明来定义事件参数的类型：

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void;
  (e: 'update', value: string): void;
}>();

const triggerChange = (id: number) => {
  emit('change', id);
};

const triggerUpdate = (value: string) => {
  emit('update', value);
};
</script>