前言
最近在学习组件间的通信方法,恰好最近项目用到了父组件向子组件传递数据,特来写篇笔记记录一下,以免后面自己忘记或者混淆
提示:以下是本篇文章正文内容,下面案例可供参考
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;
}
子组件两个参数
在这里使用两个参数
总结
提示:这里对文章进行总结:
以上就是今天要讲的内容,本文仅仅简单介绍了父组件向子组件传递数据的使用,从而实现父子组件间的通信,在子组件中也能使用到父组件的数据。
使用场景:子组件是封装的某个功能,有多个父组件要引用这个子组件,但每个父组件的数据不一样,这时,父组件就要向子组件传递数据了。