Vue.js中使用emits完成数据子传父的组件事件

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客希望大家喜欢

使用环境：WebStorm edge浏览器

1.组件事件介绍

2.组件事件工作原理

2.1发射事件 (Emitting Events)

2.2监听事件 (Listening for Events)

2.3声明事件 (Declaring Events)

例子

App.vue

FatherComponent.vue

ChildComponent.vue

注意点

报错解决

1.组件事件介绍

在组件的模版表达式中，可以直接使用$emit方法触发自定义事件，触发自定义事件的目的是组件之间传递数据。

组件事件是一种允许父组件监听子组件中发生的特定行为或状态变化的机制。它们是父子组件之间通信的一种方式，使得数据可以由子组件流向父组件。这与属性（props）的数据流方向相反，属性是从父组

2.组件事件工作原理

2.1发射事件 (Emitting Events)

子组件通过调用 this.$emit(eventName, [payload]) 来发射一个自定义事件。eventName 是你给事件起的名字，[payload] 是可选的参数，它代表了你想要传递给父组件的数据。

2.2监听事件 (Listening for Events)

父组件可以在模板中使用 v-on 指令来监听子组件发射的事件，并且可以选择性地提供一个处理函数来响应这些事件。

2.3声明事件 (Declaring Events)

在 Vue 3 中，推荐在子组件内显式声明所有可能发射的事件。这是通过 emits 选项完成的。这样做不仅有助于代码的可读性和维护性，还可以启用自动化的类型检查和编译时验证。

例子

下面的代码是组件事件（子传父）的举例，经过博主的测试，可以正常运行：

App.vue

<template>
<FatherComponent></FatherComponent>
</template>
<script>
import FatherComponent from "@/components/FatherComponent.vue";export default {components: {FatherComponent},data(){return{}}}
</script>

FatherComponent.vue

<template><h3>Hello World+FatherComponent</h3><childComponent @anotherEvent="Pleasure"></childComponent><h3>接收到的数据是:{{ messageFather }}</h3>
</template>
<script>
import childComponent from "@/components/ChildComponent.vue";export default {components: {childComponent},data() {return {messageFather: ""}},methods: {Pleasure(data) {this.messageFather = data}}
}
</script>

ChildComponent.vue

<template><h3>Vue3.0+ChildComponent</h3><button @click="eventHandlerChild">点我练习两年半</button>
</template>
<script>
export default {//要加上emits声明可以触发的事件emits:['anotherEvent'],data(){return{msg:"ChildData"}},methods:{eventHandlerChild(){this.$emit("anotherEvent",this.msg)}}
}
</script>

最终效果如下：

注意点

在需要子传父的代码中，最好加上emits声明可以触发的事件，否则浏览器可能会有警告。

另外，需要注意，红色和蓝色部分的函数名要保持一致，黄色部分传递的是同一个东西。

另外，为了确保跨浏览器兼容性，建议使用小写字母为事件命名，即使 HTML 对大小写不敏感。

同时非原生 DOM 事件也需要注意，组件事件不同于原生 DOM 事件，如 click 或 input。如果希望在组件中使用原生事件，你可以使用 .native 修饰符（Vue 2），但在 Vue 3 中，.native 修饰符已被移除，因为默认情况下所有事件都是组件事件。

事件修饰符也应当注意，类似于原生事件，也可以对组件事件使用事件修饰符，例如 .once、.capture 等等。

报错解决

[Warning] [Vue warn]: Extraneous non-emits event listeners (anotherEvent) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. (

如果遇到像上面这样的报错，表示在组件中传递了一些额外的非 emits 事件监听器，这些监听器不能自动继承给子组件，因为该子组件渲染的是片段或文本根节点。

在 Vue 3 中，如果有一个自定义组件，并且你希望父组件能够监听子组件触发的特定事件，需要明确地声明这些事件。这通过在子组件中使用 emits 选项来完成。如果一个事件没有被声明为 emits 的一部分，Vue 将会发出警告，因为它无法确定这个事件是否应该被作为自定义事件来监听。

如下属代码中加入「 emits：['anotherEvent'] 」：

export default {//要加上emits声明可以触发的事件emits:['anotherEvent'],data(){return{msg:"ChildData"}},methods:{eventHandlerChild(){this.$emit("anotherEvent",this.msg)}}
}
</script>