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

Vue3中emits和emit

news 2025/5/10 10:54:06

在 Vue 3 中，emits 和 emit 是两个相关但不同的概念，它们共同用于处理自定义事件机制。

1. `emit`（方法）

作用：用于子组件向父组件触发（发送）自定义事件，并可以传递数据。
语法：this.$emit('事件名', 参数1, 参数2, ...)
特点：
- 由子组件调用，父组件通过 @事件名 监听。
- 如果不声明 emits，Vue 仍然可以接收事件，但会发出警告（如你的代码所示）。

2. `emits`（选项）

作用：显式声明组件会触发哪些自定义事件，提高代码可读性，并避免 Vue 的警告。

语法：

emits: ['事件1', '事件2', ...]

或更详细的校验方式：

emits: {'事件名': (payload) => {// 校验参数是否合法return typeof payload === 'string'; // 返回 true 表示校验通过}
}

特点：
- 不是必须的，但推荐声明，避免警告，并让组件的接口更清晰。
- 如果使用 emits，Vue 会知道这些是自定义事件，不会尝试将其作为原生 DOM 事件处理。

3. 二者的联系

特性	`emit`（方法）	`emits`（选项）
作用	触发自定义事件	声明自定义事件
是否必须	必须（用于触发事件）	可选（但推荐声明）
位置	在方法中调用（`this.$emit()`）	在组件选项中声明
关系	`emit` 触发的事件，最好先在 `emits` 中声明	`emits` 声明的事件，由 `emit` 触发

4. 为什么 Vue 3 推荐使用 `emits`？

明确组件接口：让其他开发者一眼看出组件会触发哪些事件。
避免警告：如果不声明 emits，Vue 会认为你可能误写了事件名，发出警告。
更好的类型推断（在 TypeScript 中尤其有用）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">  <!-- 父组件 --><h1>{{title}}</h1><child @my-event="handler"></child></div></body>
<!--自定义事件:$emit("自定义事件名称",参数1,参数2...)参数是需要发到父组件的参数 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>const child = {// emits: ['my-event'], // 要么添加这行声明要么用div包裹template,不然警告template: `<div><h2>暮乘白帝过重山</h2><button @click="btnClick">子组件按钮</button></div>`,methods: {btnClick() {console.log("子组件按钮被点击了")this.$emit("my-event","child-data")},}}// 定义根组件const app = Vue.createApp({data() {return {title:"自定义事件",msg: "父组件"}},components: {child},methods:{handler(parm){console.log("子组件传来的数据：",parm)}}})app.mount('#app')
</script>
</html>

查看全文

http://www.xdnf.cn/news/347563.html