vue父组件向子组件传递数据或调用子组件的事件
前言
最近在学习组件间的通信方法,恰好最近项目用到了父组件向子组件传递数据,特来写篇笔记记录一下,以免后面自己忘记或者混淆
1、$ref
ref属性可定义在子组件或原生DOM上,如果在子组件上,则指向子组件实例,如果在原生DOM上,则指向原生DOM元素。
传递数据的思路:在父组件内通过ref获取子组件实例,然后调用子组件方法,并传递相关数据作为参数。代码如下:
父组件 Parents
<div >
<el-dialog :visible.sync="UpoladDialogVisible">
<file-upload-3 ref="fileUploadPre" @handleClose="handleClose"></file-upload-3>
</el-dialog>
</div>
在子组件注入的地方使用的ref="fileUploadPre"去传递数据。
父组件 Parents
handleUpload(){
this.title = '文件上传'
this.width = '750px'
this.UpoladDialogVisible=true;
this.$nextTick(() =>{
this.$refs.fileUploadPre.sendVal('实施库工程类','表3-完工支付')
//通过ref向子组件fileUploadPre传递数据,调用子组件的sendVal事件
})
},
子组件
子组件 fileUploadPre
sendVal(projectType,sheetName){ //子组件事件中用两个参数接收父组件传递过来的值
this.projectTypeDos = projectType;
this.sheetNameDos = sheetName;
}
子组件两个参数
在这里使用两个参数
总结
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggekjg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13