emits 声明触发的事件

最后更新：2026-10-22

emits 选项声明组件会向父组件发出的事件，起到文档与运行时校验作用（未声明的事件会警告）。

📝 语法

export default {
  emits: ["change", "submit"],
  methods: {
    fire() { this.$emit("change", 1) }
  }
}

value	数组或对象：对象形式可写校验函数 (payload) => boolean

返回值：无返回值（通过 this.$emit 触发）

修改下面的代码，在预览区实时查看效果：

输出：

点击按钮后显示「收到的消息：来自子组件」。

💡 提示 声明后 IDE 与开发者工具都能识别事件，父组件模板也有提示。

⚠️ 注意 配合 v-model 的信息：update:modelValue 也要写进 emits 才不告警。

ℹ️ 说明 事件名建议 kebab-case（HTML 属性大小写不敏感，camelCase 会被转小写）。

更多案例即将上线。

Q 不声明 emits 会怎样？

A 功能仍可用，但开发环境会警告，且透传属性会误落事件监听。

Q 能传多个参数吗？

A 可以：$emit('change', a, b)，父组件处理函数按序接收。

Q 事件名能用 camelCase 吗？

A 不推荐：DOM 模板中会被转成小写，用 kebab-case 最稳。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。