vue2中使用this.$emit向父组件传递数据（详解）

最新推荐文章于 2025-03-09 12:59:11 发布

_Nn.

最新推荐文章于 2025-03-09 12:59:11 发布

阅读量597

点赞数

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_47581094/article/details/126652145

版权

本文介绍了Vue中父子组件通信的方法，重点讲解了使用`$emit`触发自定义事件及传递数据的机制，并提供了一个子组件向父组件传递数据的实例。同时，阐述了父组件如何通过事件监听来接收并处理来自子组件的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写法：
this.$emit(’ handleName ', data);
解释：
– handleName：事件名称（随机）
– data：要传递的数据

子组件操作

例：在我点击的时候向父组件派发数据可以这么做
在这里插入图片描述

父组件如何接收数据

写法：
在这里插入图片描述

感谢查阅，请指正 ~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_Nn.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue子组件传值给父组件this.$emit();

L_WalkingPig的博客

03-16

2354

上一篇博客记录了Vue父子组件传值使用props，这篇来说说子组件传值给父组件的 ——this.$emit('xxx属性',xxx参数)；子组件： //子组件自定义一个按钮触发onSubmit()方法; <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-butt...

Vue自定义事件$emit()详解

qq_41359998的博客

08-16

2281

Vue自定义事件$emit()详解在组件绑定数据后，我们如果想实现一个点击删除按钮就删除这个数据的功能，那么我们需要删除vue中的数据。如何实现？vue实例和vue组件互不相干，组件和组件之间的操作可以用插槽，组件如何调用Vue实例中的方法？数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除 Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit(‘自定义事件名’, 参数)，操作过

参与评论您还未登录，请先登录后发表或查看评论

vue2——this.$emit两种方式传值更新（组件父子传值）

weixin_46172421的博客

09-06

8907

this.$emit两种方式传值更新 1.父组件使用.sync方式传值子组件 1.1 子组件使用$emit update方式更新 2.子组件定义自定义事件带参的形式,父组件调用自定义事件,参数修改 2.1子组件定义自定义事件，带参数。 2.2父组件调用自定义事件。感谢记录，感谢各位，欢迎补正。 end 人与人的缘分总是长长短短~ ...

关于Vue2&3的$emit和$on发布订阅模式

最新发布

云散的博客

03-09

785

emit和$on是Vue.js中用于实现组件间通信的方法，不过它们在中的使用场景和方式略有不同，下面分别进行介绍。

vue2练习 this.$emit(“update:xx“,value)

weixin_49423894的博客

07-06

269

父组件子组件。

vue2和vue3中，关于$emit的用法

weixin_43534452的博客

06-28

4011

vue2、vue3的emit使用

vue2组件通信(子组件向父组件传递数据)---$emit的用法

weixin_70024734的博客

07-10

345

vue2组件通信(子组件向父组件传递数据)---$emit的用法。

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

10-17

在Vue组件中，当你需要将数据或事件从子组件传递给父组件时，可以使用`this.$emit()`。例如，在提供的代码示例中，子组件`EventDemo`有一个`handleChange`方法，该方法在`input`元素的`change`事件触发时被调用。在...

vue中$refs, $emit, $on, $once, $off的使用详解

10-16

父组件通过在模板中使用 `@my-event="getMyEvent"` 监听这个事件，并调用 `getMyEvent` 方法来处理传递的数据。 3. **$on** `$on` 是 Vue 实例的方法，用于监听自定义事件。它允许我们在组件内或全局范围内注册一...

vue2.0 中#$emit,$on的使用详解

08-30

Vue 2.0 中 $emit 和 $on 的使用详解 Vue 2.0 中 $emit 和 $on 是两个非常重要的概念，它们用于实现组件之间的通信。$emit 用于触发事件，而 $on 用于监听事件。 $emit $emit 是 Vue 2.0 中用于触发事件的方法。...

vue3知识点4.父组件向子组件传递数据代码/子组件向父组件传递数据代码/非父子/兄弟组件互相传递数据代码

yangyangdt的博客

12-21

275

这里我放的是父传子，子传父。非父子传值的代码，具体原理和解释请移步组件之间的传值，足够十万分详细。

vue2中子组件向父传值$emit方法的使用

ONLYSRY的博客

10-09

6694

vue2中子组件向父传值$emit方法的使用。

vue中this.$emit的用法

weixin_45650737的博客

03-16

3394

转自https://www.cnblogs.com/shenStudy/p/15327718.html vue中this.$emit的用法用于当子组件需要调用父组件的方法的场景下使用。与之相对的当父组件需要调用子组件时则使用this.$refs的方法实例为了能清晰的了解具体用法，准备了一个父子组件互调方法的例子。父组件 父组件调用子组件需要导入子组件的路径并添加组件之后添加子组件标签即可。子组件子组件在调用父组件是需要在父组件中添加事件来触发父组件的方法。

vue2中this.$emit(“update:xx“,value)和xx.sync的用法在vue3中有什么变化

weixin_45266691的博客

01-08

2125

在 Vue 3 中，v-model语法和的用法略有变化，而.sync修饰符已经不再存在。

关于vue.js中this.$emit的理解

qq_34129336的博客

03-13

3万+

一、每个 Vue 实例都实现了事件接口，即： 1、使用 $on(eventName) 监听事件 2、使用 $emit(eventName, optionalPayload) 触发事件二、注意事项 1、父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件 2、不能用 $on 监听子组件释放的事件，而必须在模板里直接用 v-on 绑定三、例子及说明1、父组件代码及说明&lt...

vue中的this.$emit方法：用于子组件中触发父组件方法并传值

飙歌的博客

02-22

6675

作用：用于子组件中触发父组件方法并传值。$emit update 和 .sync 修饰符作用：.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

vue2 中this.$emit(“update:xx“,value)和xx.sync的用法

m0_65730686的博客

11-11

4372

vue2 中this.$emit(“update:xx“,value)和xx.sync的用法

vue中this.$emit()

lmf13992427957的博客

04-19

1466

一.主要用来父子间传值 父组件为UserList.vue,子组件为UserModal.vue 1.父组件代码 <user-modal ref="modalForm" @ok="modalFormOk" @flagFn="flagFz" :flag="flag"></user-modal> import UserModal from './modules/UserModal'//父组件导入子组件 data() { return { flag

Vue子组件向父组件传值（this.$emit()方法）

热门推荐

sisi_chen的博客

08-13

27万+

子组件使用this.$emit()向父组件传值首先必须在父组件中引用子组件，然后实现传值第一步在父组件中引入子组件使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder,...

this.$emit方法详解

08-26

this.$emit方法是Vue.js中用于触发自定义的方法。它是由实例、组件或指令中的事件系统提供的。当我们需要在父组件中监听子组件的事件时，可以在子组件中使用this.$emit方法触发事件，并在父组件中使用v-on指令监听该事件。具体使用方法是，在子组件中调用this.$emit方法，并传入两个参数，第一个参数是事件名称，第二个参数是要传递给监听器的数据。例如： ```javascript // 子组件中 this.$emit('eventName', data); ``` 然后，在父组件中使用v-on指令绑定事件监听器，并执行相应的处理方法。例如： ```html  <template> <div> <child-component v-on:eventName="handleEvent"></child-component> </div> </template> <script> export default { methods: { handleEvent(data) { // 处理事件的逻辑 } } } </script> ``` 当子组件中调用this.$emit('eventName', data)时，父组件中的handleEvent方法会被调用，并且传入相应的数据。需要注意的是，事件名称可以自定义，但建议使用驼峰式命名，并且在监听事件时，需要将事件名称转换为kebab-case形式（短横线分隔）。同时，父组件也可以通过v-on指令传递参数给子组件，实现父子组件之间的数据通信。例如： ```html  <template> <div> <child-component :propName="parentData"></child-component> </div> </template> <script> export default { data() { return { parentData: 'Hello' } } } </script> ``` 在子组件中可以通过props接收父组件传递的数据。这就是this.$emit方法的详解，希望能对你有所帮助！如果你还有其他问题，请继续提问。