Vue3有this.$emit吗

时间: 2023-11-07 15:03:07 浏览: 86

关于vue中 $emit的用法详解

5星 · 资源好评率100%

Vue 中 $emit 的用法详解在 Vue 中，$emit 是一个非常重要的事件触发器，它允许子组件触发父组件的事件，从而实现了父子组件之间的通信。在本文中，我们将详细介绍 Vue 中 $emit 的用法，并通过实例代码给大家介绍了子组件和父组件的相关知识。一、父组件和子组件的通信在 Vue 中，父组件可以使用 props 把数据传给子组件，而子组件可以使用 $emit 触发父组件的自定义事件。这使得父子组件之间的通信变得非常方便。二、$emit 的用法 $emit 的用法非常简单，格式如下： ``` vm.$emit(event, arg) ``` 其中，`event` 是要触发的事件名，`arg` 是要传递给事件处理函数的参数。例如，在子组件中，可以使用 $emit 来触发父组件的事件： ```html <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div> </template> <script> export default { name: 'trainCity', methods: { select(val) { let data = { cityname: val }; this.$emit('showCityName', data); // 触发父组件的 showCityName 事件 } } } </script> ``` 在上面的代码中，我们在子组件中使用 $emit 来触发父组件的 showCityName 事件，并传递了一个名为 `data` 的对象作为参数。三、父组件的事件监听在父组件中，可以使用 $on 方法来监听子组件触发的事件。格式如下： ``` vm.$on(event, fn) ``` 其中，`event` 是要监听的事件名，`fn` 是要执行的事件处理函数。例如，在父组件中，可以使用 $on 方法来监听子组件触发的 showCityName 事件： ```html <template> <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> </template> <script> export default { name: 'index', data() { return { toCity: "北京" } }, methods: { updateCity(data) { this.toCity = data.cityname; console.log('toCity:' + this.toCity) } } } </script> ``` 在上面的代码中，我们在父组件中使用 $on 方法来监听子组件触发的 showCityName 事件，并执行了 updateCity 方法来更新父组件的状态。四、总结通过上面的介绍，我们可以看到，$emit 是 Vue 中一个非常实用的事件触发器，它允许子组件触发父组件的事件，从而实现了父子组件之间的通信。使用 $emit 可以使得我们的代码更加灵活和简洁。希望本文能够对大家有所帮助，如果大家有任何疑问，请随时留言！

Vue3中不再使用this.$emit()方法。在Vue3中，事件的触发和监听采用了新的API，即使用`$emits`和`$listeners`属性。通过在组件的模板中使用`v-on`指令来触发事件，而无需再使用`this.$emit()`方法。这是Vue3对事件处理的一项重大改变，旨在提供更加直观和简洁的事件处理方式。

阅读全文

Vue3有this.$emit吗

相关推荐

详解vue中this.$emit()的返回值是什么

vue3 this.$emit

vue2 this.$emit

vue里面的this.$emit

vue中的this.$emit

vue3使用他this.$emit

vue中 this.$eventHub.$emit 的用法

vue中this.$EventBus.$emit什么意思

对vue.js中this.$emit的深入理解

vue2中this.$bus.$emit如何接受一个对象

vue中this.$emit的作用

vue中this.$emit怎么使用

vue this.$emit

this.$emit this.$on this.$off

this.$emit和uni.$emit

vue的this.$emit()怎么用

this.$emit和this.$on

this.$emit,this.$refs

this.$on和this.$emit失效

最新推荐

解决vue bus.$emit触发第一次$on监听不到问题

数学建模学习资料 姜启源数学模型课件 M04 数学规划模型 共85页.pptx

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？

数学建模学习资料姜启源数学模型课件 M04 数学规划模型共85页.pptx