使用$emit实现子组件调用父组件方法并获取返回值（本人小后端，初学vue，存个笔记）

已于 2023-03-29 15:37:44 修改
阅读量966 收藏 2
点赞数 1
文章标签： vue
于 2023-03-29 15:36:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43421760/article/details/129837524
版权

1 首先暴露子组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/81dfedc840ac4eb2ba4d

2 在父组件中引入子组件
在这里插入图片描述

3 定义父组件中的方法,callback为子组件调用时所需的返回值
在这里插入图片描述

4 在子组件中使用this.$emit(’ aaa ',( bbb)=>{ 此处bbb为所调用父组件方法的返回值})
在这里插入图片描述

爱钓鱼的码农阿贺
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中父组件添加自定义参数后，如何获取子组件$emit传递过来的参数
时清云的博客
07-15 2613
vue中子组件使用$emit传参，父组件接收参数的同时添加自定义参数，这个是在项目中常见的应用场景.总结一下。 本文大纲： 1、子组件使用emit传过来的参数只有一个时（父组件可以使用$event接收子组件传过来的参数） 子组件（child1）： this.$emit('fromChild1','我是子组件传过来的参数--child1') 父组件： <child1 @fromChild1="getChild1($event,'我是父组件中的自定义参数--parent1')"></chi
Vue $emit $refs子父组件间方法的调用实例
10-18
今天小编就为大家分享一篇Vue $emit $refs子父组件间方法的调用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用$emit时,父组件无法监听到子组件的事件实例
08-27
下面小编就为大家分享一篇vue使用$emit时,父组件无法监听到子组件的事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3子组件调用父组件的方法并获取返回值
徐三岁的博客
05-12 1607
需求：子组件需要向父组件传参，并获取父组件的返回值，父组件的方法自身也需要传参。
Vue $emit 和 $on的用法
wjswangjinsheng的博客
03-30 7290
一、$emit 1、this $emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、this.on(′事件名′,callback)callback回调on('事件名',callback) callback回调on(′事件名′,callback)callback回调emit要传送的数据； 2、监听当前实例上自定义事件； 三、实例 <html> <head> <title>$emit 和 $on&l
vue之$emit返回值
Hi,印象钟情
09-13 2040
使用场景：子组件调用父组件的方法并获取到父组件方法的返回值。如果是兄弟组件的话采用事件车。
Vue 获得 $emit 对应函数的返回值
broken_promise的博客
04-18 5982
获得$emit对应函数的返回值 大概的问题就是, 子组件 Avatar 触发了父组件 Info 的回调, 希望拿到回调函数的返回值进而拿到父组件的某些信息, 比如 下面是子组件 <template> <div style="background-color: skyblue;"> <div>我是Avatar-子组件</div> <button @click="getParentInfo">点我获取信息</butt
vue 中 父子组件值交互怎么使用 this.$emit
weixin_44994494的博客
09-19 1730
子组件 传值到父组件 使用 this.$emit(‘父组件方法名’)父组件一般通过 @ this.emit("这个名称")进行获取值例如子组件是this.emit("这个名称") 进行获取值 例如 子组件是 this.emit("这个名称")进行获取值例如子组件是this.emit(‘test’). 父组件 就是@test=“方法名”父组件传参数使用 :参数名：“参数“
子组件调用父组件方法，并接收父组件方法的返回值
zxxAdela的博客
07-12 635
子组件在标签中调用父组件的方法，不显示值，将父组件的方法挪到子组件中就可以正常显示，因为this.$emit获取不到父组件方法的return值，以下将通过回调函数获取父组件的返回值。在vue3项目ts写法报错组件没有默认导出，是因为Vetur-v0.35.0不支持vue3版本，需要下载Vue Language Features (Volar)-v0.29.8。翻译过来是找不到 vue模块 需要在tsconfig.json文件中将 moduleResolution设置成node。
Vue子组件使用$emit接收从父组件的返回值
yhj198927的博客
04-20 3178
1.父组件 <template> <div> <div style="font-weight:bold">{{ fatherText }}：{{ toChild }}</div> <br /> <child-data @showFatherData="updateFatherData" @getFromChild="getFromChild" :toChildData="to
Vue $emit()不能触发父组件方法的原因及解决
10-15
主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用
热门推荐
zhouzuoluo的博客
06-02 1万+
一、vue2开发中$emit 、$on 、$once 、$off 的使用 简单概述： 1、vm.$emit(eventName,callback) 和$on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件（并将附加参数都传给监听器回调），使用$on 监听该事件并调用回调函数。这两个事件方法可以结合props 属性实现父子组件双向传参。...
vue组件——组件通信
Sachin的博客
07-09 405
vue组件——组件通信Prop基本使用Prop 类型Prop 验证注意自定义事件基本使用`.sync` 修饰符插槽基本使用具名插槽带数据的插槽动态组件 Prop 基本使用 子组件使用 props，声明需要父组件传递的的参数： 父组件通过绑定的方式传递给子组件 基本例子，子组件： <template> <div class="hello"> <h1&gt...
Vue3 defineEmits 获取emit执行后的返回值
qq_40577885的博客
08-19 2966
在Vue3中，emit 执行后，是无法直接获取到返回值的。因为vue3就不支持这种写法。在子组件HelloWorld中，我们的目的是当点击 button 按钮时，获取emits 的返回值，然后按钮显示。那我们要怎么获取 emit的返回值呢？其实我们可以借助一个callback 函数，来进行取值。
（自用）子组件需要调用父组件的方法，并且有返回值
qq_61392679的博客
11-03 480
vue子组件调父组件方法无法获取返回值的解决方案
Vue2 $emit传函数类型回调获取父组件参数
白瑕 的博客
11-08 2207
$emit传函数类型回调获取父组件参数.
callback用法 js vue_vue中$refs, $emit, $on, $once, $off的使用详解
weixin_39903846的博客
01-26 625
1.$refs的使用场景父组件调用子组件的方法，可以传递数据。父组件：点击父组件import ChildA from './child.vue'export default{components:{ChildA},data(){return {msg:'我是父组件的数据'}},methods:{getMyEvent(){//调用子组件的方法，child是上边ref起的名字，emitEvent是子组...
基于关键词搜索结果的微博爬虫（下载即用）.zip
最新发布
05-21
基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改
vue3子组件调用父组件的函数，并获取返回值在子组件进行赋值
11-03
在Vue3中，子组件可以通过`$emit`方法向父组件发送事件，父组件可以通过`v-on`指令监听子组件的事件并调用相应的方法。如果需要在子组件中获取父组件方法的返回值并进行赋值，可以使用`async/await`结合`$emit`和`v-on`来实现。 具体步骤如下： 1. 在父组件中定义一个异步方法，并在该方法中调用需要执行的函数并返回结果。 2. 在子组件中通过`$emit`方法向父组件发送事件，并将父组件的方法名和参数传递给父组件。 3. 在父组件中通过`v-on`指令监听子组件的事件，并在事件处理函数中调用相应的方法并将结果通过`$emit`方法返回给子组件。 4. 在子组件中通过`await`关键字等待父组件返回的结果，并将结果赋值给子组件的变量。 代码示例： 父组件： ```html <template> <div> <child-component @get-result="getResult"></child-component> <p>父组件中的结果：{{ result }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { async getResult() { // 调用需要执行的函数并返回结果 const result = await someFunction() // 将结果通过$emit方法返回给子组件 this.$emit('set-result', result) } }, data() { return { result: '' } } } </script> ``` 子组件： ```html <template> <div> <button @click="getResult">获取结果</button> <p>子组件中的结果：{{ result }}</p> </div> </template> <script> export default { methods: { getResult() { // 向父组件发送事件，并将父组件的方法名和参数传递给父组件 this.$emit('get-result') } }, data() { return { result: '' } }, mounted() { // 监听父组件通过$emit方法返回的结果，并将结果赋值给子组件的变量 this.$on('set-result', result => { this.result = result }) } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值