Vue3中emits和emit
在 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>