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;
    }

子组件两个参数


在这里使用两个参数

---

总结

提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了父组件向子组件传递数据的使用，从而实现父子组件间的通信，在子组件中也能使用到父组件的数据。
使用场景：子组件是封装的某个功能，有多个父组件要引用这个子组件，但每个父组件的数据不一样，这时，父组件就要向子组件传递数据了。