Preface
Recently, I have been learning the communication method between components. It happened that the recent project used the parent component to transfer data to the child component. I specially wrote a note to record it so that I will not forget or get confused later.
提示：以下是本篇文章正文内容，下面案例可供参考
1、$ref
The ref attribute can be defined on a child component or native DOM. If it is on a child component, it points to the child component instance. If it is on a native DOM, it points to the native DOM element.
The idea of passing data: Get the subcomponent instance through ref in the parent component, then call the subcomponent method and pass the relevant data as parameters. code show as below:
父组件 Parents
<div >
<el-dialog :visible.sync="UpoladDialogVisible">
<file-upload-3 ref="fileUploadPre" @handleClose="handleClose"></file-upload-3>
</el-dialog>
</div>
Use ref="fileUploadPre" where the subcomponent is injected to pass data.
父组件 Parents
handleUpload(){
this.title = '文件上传'
this.width = '750px'
this.UpoladDialogVisible=true;
this.$nextTick(() =>{
this.$refs.fileUploadPre.sendVal('实施库工程类','表3-完工支付')
//通过ref向子组件fileUploadPre传递数据，调用子组件的sendVal事件
})
},
Subassembly
子组件 fileUploadPre
sendVal(projectType,sheetName){
//子组件事件中用两个参数接收父组件传递过来的值
this.projectTypeDos = projectType;
this.sheetNameDos = sheetName;
}
Subcomponent two parameters
Use two parameters here
Summarize
Tip: Here is a summary of the article:
The above is what I will talk about today. This article only briefly introduces the use of parent components to transfer data to child components, thereby realizing communication between parent and child components. The parent component can also be used in child components. data.
Usage scenario: A subcomponent is an encapsulated function. There are multiple parent components that want to reference this subcomponent, but the data of each parent component is different. At this time, the parent component must pass data to the subcomponent.