Vue 通过this.$emit()方法子组件向父组件传值(步骤分享)
更新时间：2022年11月04日 11:44:10 作者：sisi_chen
这篇文章主要介绍了Vue this.$emit()方法通过子组件向父组件传值,第一步在父组件中引入子组件，第二步子组件向父组件传值，本文通过需要的朋友可以参考下
子组件使用this.$emit()向父组件传值
首先必须在父组件中引用子组件，然后实现传值
第一步 在父组件中引入子组件
使用import引入组件
import indexImportOrder from './components/indexImportOrder'
声明
//定义组件
components:{
indexImportOrder,
},使用
<indexImportOrder ref="indexImportOrder"/>
第二步 子组件向父组件传值
1. 在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数
//新订单页面跳转
viewBusiness(){
let flag = false;
this.$emit('closeMain',flag);
},2. 在父组件中子组件引用处添加函数v-on:function="function1"； //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称
v-on： 可用 @ 代替 @function="function1" ，@ 为 v-on：的简写
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>
val及为子组件中flag，即接收的子组件参数
closeMain(val){
this.flag = val;
},
更详细解释可参照：https://www.jb51.net/article/114907.htm
到此这篇关于Vue this.$emit()方法通过子组件向父组件传值的文章就介绍到这了,更多相关vue子组件向父组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中的.capture和.self区分及初步理解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 解除鼠标的监听事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue路由自动添加#的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现web在线聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件, Vue.use()的作用就是让它里面被注册的组件能够被全局使用,本文通过实例代码介绍vue项目中main.js的用法,感兴趣的朋友一起看看吧2023-10-10
vue使用smooth-signature实现移动端横竖屏电子签字
这篇文章主要为大家介绍了vue使用smooth-signature实现移动端横竖屏电子签字示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
今天小编就为大家分享一篇关于详解vue-router导航守卫，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
好用的用户引导插件有 intro.js 和 driver.js 两个，对比了一下，最终还是使用了driver.js，这篇文章主要介绍了vue3项目新用户引导组件(driver.js),需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中数据不响应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 接口请求地址前缀本地开发和线上开发设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论