vue中关于$emit的用法

在 Vue.js 中，$emit 是子组件向父组件通信的核心方法，允许子组件触发自定义事件并传递数据。以下是其核心用法和示例：

1. 基本用法

子组件触发事件：通过 this.$emit('事件名', 数据) 触发自定义事件。
父组件监听事件：在子组件标签上使用 @事件名="处理函数" 监听。

<template> <button @click="sendToParent">点击传递数据</button></template><script>export default { methods: { sendToParent() { this.$emit('custom-event', '来自子组件的数据'); } }}</script><template> <child-component @custom-event="handleEvent" /></template><script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, methods: { handleEvent(data) { console.log(data); // 输出: "来自子组件的数据" } }}</script>2. 传递多个参数

$emit 可以传递多个参数，父组件通过事件处理函数的参数接收。

// 子组件this.$emit('multi-params', '参数1', '参数2', { key: '参数3' });// 父组件<child-component @multi-params="(arg1, arg2, obj) => console.log(arg1, arg2, obj)" />3. 配合 v-model 实现双向绑定

Vue 2.x 中，v-model 本质是 value prop + input 事件的语法糖。子组件需通过 $emit('input', 新值) 更新数据。

<input :value="value" @input="$emit('input', $event.target.value)"><child-component v-model="parentData" />

Vue 3 中，v-model 默认使用 modelValue prop 和 update:modelValue 事件：

// 子组件this.$emit('update:modelValue', newValue);4. 事件验证（Vue 3）

在 Vue 3 中，子组件可通过 emits 选项定义事件，增强可读性并验证事件名。

export default { emits: ['submit', 'delete'], // 声明事件 methods: { submitForm() { this.$emit('submit', formData); // 合法 // this.$emit('unknown'); // 警告（未声明） } }}5. 注意事项

事件命名：推荐使用 kebab-case（如 submit-form），因为 HTML 属性不区分大小写。
避免滥用：复杂通信建议使用 Vuex 或 Pinia 状态管理。
性能：高频事件（如滚动）需防抖处理。

示例图解

子组件触发事件
父组件监听事件
事件参数传递

通过 $emit，Vue 实现了灵活的组件间通信，尤其适合父子组件的轻量级交互。

您可能感兴趣问答

Collapsible

热门标签

热点问答

vue中 关于$emit的用法

您可能感兴趣问答

Collapsible

热门标签

热点问答

vue中关于$emit的用法