一文带你深入理解Vue3中的emit使用

<!-- 子组件 -->
<script setup>
import { defineEmits } from 'vue';

// 定义触发的事件及其数据类型
const emit = defineEmits(['update', 'delete']);

// 触发事件
const handleUpdate = () => {
  emit('update', { id: 1, name: 'Vue 3' });
};

const handleDelete = () => {
  emit('delete', 1); // 触发 delete 事件，传递一个 ID
};
</script>

<template>
  <button @click="handleUpdate">更新</button>
  <button @click="handleDelete">删除</button>
</template>

<!-- 父组件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';

const handleUpdate = (data) => {
  console.log('更新事件触发：', data);
};

const handleDelete = (id) => {
  console.log('删除事件触发，ID:', id);
};
</script>

<template>
  <ChildComponent @update="handleUpdate" @delete="handleDelete" />
</template>

<!-- 子组件 -->
<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props 和 emit
const props = defineProps({
  value: String
});

const emit = defineEmits(['input']);

// 修改输入时触发 input 事件
const handleInput = (event) => {
  emit('input', event.target.value);
};
</script>

<template>
  <input :value="value" @input="handleInput" />
</template>

<!-- 父组件 -->
<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const inputValue = ref('初始值');

const handleInput = (value) => {
  inputValue.value = value;
};
</script>

<template>
  <ChildComponent :value="inputValue" @input="handleInput" />
  <p>父组件中的值：{{ inputValue }}</p>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from 'vue';

// 定义 props 类型
interface Props {
  value: string;
}

// 定义 emits 类型
type Emits = {
  (event: 'input', value: string): void;
  (event: 'delete'): void;
};

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 使用 emit
const handleInput = (value: string) => {
  emit('input', value);
};

const handleDelete = () => {
  emit('delete');
};
</script>

// 子组件
emit('update', 'value1', 'value2');

// 父组件
<Child @update="handleUpdate" />

<script setup>
const handleUpdate = (param1, param2) => {
  console.log(param1, param2); // param1 = 'value1', param2 = 'value2'
};
</script>

const emit = defineEmits<{ (event: 'update', value: string): void }>();

emit('update', 'newValue'); // 正确
emit('update', 123); // 错误，类型不匹配

const emit = defineEmits(['update', 'delete']);

emit('update', 'newValue'); // 正确
emit('delete'); // 正确
emit('add'); // 错误，未声明 'add' 事件