vue使用父子组件传递值和调用方法

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')直接调用父组件的方法