1、父子组件关系:在父组件通过import 方式引入子组件
例如:import excelDataset from './excelDataset.vue'
2、在export default 模块中添加 components属性,内容是导入的子组件
components: {excelDataset},
3、使用:直接通过标签,即可使用,我这里是通过excelDatasetVisible来控制子组件的显示和隐藏,子组件的内容是一个dialog弹框
<excelDataset ref="excelDataset"
:excelDatasetVisible="excelDatasetVisible"
:packageId="packageId"
@closeExcelDataset="handleCloseExcelDataset"
/>
4、父组件向子组件传递值,例如传递父组件的 packageId 到子组件
那么就可以在父组件标签中添加:packageId="packageId
这个属性。
子组件怎么接收呢?
在子组件的export default 模块中添加props属性,用来接收父组件传递过来的值,子组件中可以定义传递值的类型、默认值等等。然后就可以直接在子组件中使用this.packageId进行获取了
export default {
name: 'excelDataset',
props: {
excelDatasetVisible: {
default: false
},
packageId: {
}
},
}
5、父子组件方法调用
在父组件中的标签中添加 @closeExcelDataset 事件,handleCloseExcelDataset方法为具体的调用方法
<excelDataset ref="excelDataset"
:excelDatasetVisible="excelDatasetVisible"
:packageId="packageId"
@closeExcelDataset="handleCloseExcelDataset"
/>
子组件中 使用 this.$emit('closeExcelDataset', 'Excel数据集')
调用父组件的事件
或者使用 this.$emit('handleCloseExcelDataset')
直接调用父组件的方法