前言

最近在学习组件间的通信方法，恰好最近项目用到了父组件向子组件传递数据，特来写篇笔记记录一下，以免后面自己忘记或者混淆

提示：以下是本篇文章正文内容，下面案例可供参考

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"去传递数据。

父组件 ParentshandleUpload(){this.title = '文件上传'this.width = '750px' this.UpoladDialogVisible=true;this.$nextTick(() =>{this.$refs.fileUploadPre.sendVal('实施库工程类','表3-完工支付')//通过ref向子组件fileUploadPre传递数据，调用子组件的sendVal事件})},

子组件

子组件 fileUploadPresendVal(projectType,sheetName){//子组件事件中用两个参数接收父组件传递过来的值this.projectTypeDos = projectType;this.sheetNameDos = sheetName;}

子组件两个参数

在这里使用两个参数

总结

提示：这里对文章进行总结：

以上就是今天要讲的内容，本文仅仅简单介绍了父组件向子组件传递数据的使用，从而实现父子组件间的通信，在子组件中也能使用到父组件的数据。

使用场景：子组件是封装的某个功能，有多个父组件要引用这个子组件，但每个父组件的数据不一样，这时，父组件就要向子组件传递数据了。