vue+$emit调用父级方法，添加其他参数

最新推荐文章于 2024-06-13 00:00:00 发布
最新推荐文章于 2024-06-13 00:00:00 发布
阅读量2.1k 收藏 3
点赞数 2
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41619796/article/details/109806684
版权

前言：

       我们在vue中子组件调用父组件的方法使用的是this.$emit(方法名+参数)，但是在某些特定场合。我们还希望可以在父组件那里添加其他参数。

实现方法：

<uploadImg :imageLists = "image_box.license_images" @changeImg="changeImg_license($event,'license')" @deleteImg="deleteImg"></uploadImg>

1、$event  是你$emit传的参数，固定值

2、'license' 是其他参数

浩星
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件
02-01 4037
2019-05-10 [vue]子组件通过$emit调用父组件的方法以及传递数据给父组件 原理也很简单，子组件使用$emit来触发父组件的函数，子组件借助这个父组件的函数将数据传给父组件。 父组件中方法： <template> <div>{{ChildData}}</div> <router-view @pushData="getChildData"></router-view> </template> .
Vue —— $emit 监听子组件事件
bats的博客
07-14 864
Vue —— $emit 监听子组件事件监听子组件事件（官方Demo）基本用法子组件通过`emit`抛出参数父组件接受的事件不是一个方法父组件的事件处理函数是一个方法在自定义组件上使用`v-model` vm.$emit( eventName, […args] ) 参数： {string} eventName […args] 触发当前实例上的事件。附加参数都会传给监听器回调。 监听子组件事件（官方Demo） 基本用法 在我们开发 <blog-post> 组件（子组件）时，它的一些功
Vue组件通信：子组件向父组件传值（详解 & 代码示例）
热门推荐
qq_53322872的博客
07-07 1万+
文章主要讲述了父组件如何获取子组件的数据。笔者将其分为了”子组件主动发送”和“父组件主动获取”两种情景并配以详细的代码示例。
vue中使用emit
最新发布
BradenHan的专栏
06-13 1629
Vue 3 中，通过在子组件的setup函数中使用明确定义要发出的事件，以及在父组件中使用模板语法监听这些事件，实现了更清晰和类型安全的父子组件通信。这种方式鼓励开发者提前规划组件间通信的接口，提高了代码的可维护性和可读性。
vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数...
weixin_33831196的博客
10-18 1456
前言 很多时候用$emit携带参数传出事件，并且又需要在父组件中使用自定义参数时，这时我们就无法接受到子组件传出的参数了。找到了两种方法可以同时添加自定义参数的方法。 方法一 子组件传出单个参数时： // 子组件 this.$emit('test',this.param) // 父组件 @test='test($event,userDef...
vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数 Vue.js
博小客_______K·Cross
08-13 398
很多时候用$emit携带参数传出事件，并且又需要在父组件中使用自定义参数时，这时我们就无法接受到子组件传出的参数了。 找到了两种方法可以同时添加自定义参数的方法。 方法一 子组件传出单个参数时： // 子组件 this.$emit('test',this.param) // 父组件 @test='test($event,userDefined)' 方法二 子组件传出多个参数时： // 子组件 this.$emit('test',this.param1，this.param2, this.param3) /
vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数
mm
05-28 1222
提示： 很多时候用$emit携带参数传出事件，并且又需要在父组件中使用自定义参数时，这时我们就无法接受到子组件传出的参数了。 以下方式可同时添加自定义参数的方法。 一、组件传入单个参数时： //子组件传入data: this.$emit("watchData", data); //父组件接收data同时自定义index @watchData="getData($event,index)" 二、组件传入多个参数时： // 子组件传入data1,data2 this.$emit('.
Vue $emit()不能触发父组件方法的原因及解决
10-15
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
方法内部通过`this.$parent.$emit`来触发父组件上的myclick事件，并将待处理的数据作为参数传递。 ### 结论 通过上述代码示例和解释，我们可以了解到如何在Vue.js中正确地使用$on和$emit方法来实现父子组件间...
父组件和子组件的方法调用，$emit和$parent
m0_48850082的博客
03-28 624
在开发页面时，将子组件（新增抽屉）引入到父页面中，进行新增操作，在新增提交后父页面却没有显示出新增的那条数据，这里首先对引入的子组件添加ref 此处省略其他代码： // 引入 <addContrastDrawer ref="addContrastDrawer"></addContrastDrawer> // 使用 <el-button type="primary" size="small" @click.stop="$refs.addContrastDrawer.popup
vue子组件调用父组件父页面的方法
weixin_46518533的博客
03-29 798
vue子组件调用父组件父页面的方法 如图：选择城市后，页面重新请求数据！（城市选择是子组件）选择完后不刷新页面，重新调用接口渲染主页面！   第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </
自定义事件传参问题 -- vue $emit 接收子组件参数 同时 在父组件 添加参数
siwangdexie_copy的博客
02-18 6061
背景描述： // 子组件 this.$emit(‘test’,this.param1，this.param2, this.param3) // 父组件 arguments 是以数组的形式传入 @test='testFather(arguments,userDefined)' methods：{ testFather(vals,userDefined){ //访问vals就可以得到子组件传过来...
[Vue2] 子组件$emit传递参数给父组件时,父组件如何再放入参数
weixin_49993071的博客
07-07 580
子组件$emit传递参数给父组件时,父组件如何再放入参数
vue子组件$emit传出参数后，父组件如何接受参数的同时添加自定义参数
木辰風的博客
06-14 2780
有些情况下，我们在子组件使用$emit传出参数后，如果父组件在接收的时候添加了自定义参数，就无法再接收到子组件传出的参数了。 有办法可以解决这个问题，既能拿到子组件传过来的参数，又能在父组件自定义调用函数时传入的参数。1.父组件不传参数时： 2.父组件传自定义的参数，子组件传多个参数时： 其中是用户在父组件自定义的参数，是在子组件传给父组件的参数...
vue学习-vue回调中有参数，页面需要新加参数
蚂蚁搬家
06-29 3079
1.回调页面方法 this.$emit("edit", type);回调中只有一个参数type2.但是在父页面需要往该回调函数中增加新参数index写法需如下：v-on:edit-panel='edit(index,$event)'即需要在新增加的参数后面加上$event3.在父页面实现该回调函数时，写法如下：edit: function(index,type) {}即，在父页面新添加的参数，要写...
vue子组件调用父组件怎样传参数
kairui_guxiaobai的博客
08-22 2641
栗子分解 子组件child通过$emit调用父组件分方法来传递数据。 主要是讲解子组件调用父组件的方法并传递数据的栗子，组件内容从简：父子组件都是一个带标题的按钮 子组件 <template> <button @click="emitEvent">我是子组件</button> </template> <script> export...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-04 8391
子组件child.vue。父组件father.vue。
Vue组件封装基础（父子组件传参 Props this.$emit）
qq_36770411的博客
01-10 1044
为了实现高新能、低耦合、高复用需要对常用的功能和模块进行封装成组件进行使用。
举一个 vue 组件调用父级方法的例子
05-23
假设有一个父组件 `Parent.vue` 和一个子组件 `Child.vue`，子组件需要调用父组件的方法。 在父组件中，定义一个方法： ```vue <template> <div> <Child @child-event="parentMethod" /> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, methods: { parentMethod() { console.log('Parent method called from child component'); }, }, }; </script> ``` 在子组件中，通过 `$emit` 触发事件，并传递参数： ```vue <template> <button @click="emitEvent">Call parent method</button> </template> <script> export default { methods: { emitEvent() { this.$emit('child-event'); }, }, }; </script> ``` 在子组件中触发 `emitEvent` 方法，会触发 `child-event` 事件，从而调用父组件的 `parentMethod` 方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值