vue3 setup语法糖，常用的几个：defineProps、defineEmits、defineExpose、

vue3和vue2组件之间传参的不同

二、defineEmits子传父

在Vue 3中，可以使用 defineEmits 函数来声明子组件可以触发的事件。该函数需要在子组件中使用，并且需要在 setup 函数中调用 。

理论知识：

父组件通过@绑定子组件注册好的事件名，在父组件中进行处理子组件传过来的value

子组件通过两点：

1.defineEmits()函数用来声明子组件可以触发的事件

   语法：const 事件名 = difineEmits(['事件'])

2.在"事件"方法内部，使用注册好的事件，向父组件传参

   语法：声明的事件名('事件'，传递的数据)

理论知识代码：

 

子组件：

//封装组件：AllTable.vue

写到这儿，在vue开发中，常用的组件之间就上面两种方式。

但，当情景不止是父<——>子 之间通讯，可以考虑inject注入、defineExpose()暴露、pinia(或vuex) 

 三、defineExpose 获取子组件的实例和内部属性

子组件将方法、变量暴露给父组件使用，父组件才可通过 ref API拿到子组件暴露的数据。

效果展示：

参考链接：defineexpose的使用

在vue2中，通常会在子组件便签上加，ref来获取子组件的实例和属性方法，在 Vue3的script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。

如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，defineExpose可以实现

1.父组件通过ref中访问子组件的方法、变量

2.子组件中，子组件的方法、变量需要通过defineExpose暴露出去

 代码：

const selectMaterial = ref();
const selectSystemMaterial = () => {
  //打开弹框
  selectMaterial.value.Open(true);
};

弹框组件：

//弹框组件封装
 
    
      
      
    

写到这儿，以上就是difineExpose()的用法 。

以下是调取接口——数据回显——选中数据传参，可选看：

 代码(打开弹框调取接口——数据回显)：

const handleNew = () => {
  data.isOpenDialog = !data.isOpenDialog;
  const params = {
    shipGuid: data.ruleForm.shipGuid,
    category: 2,
  };
  console.log(data.AllTableData)
  api.getMaintainItems.post(params).then((res) => {
    // data.mytableData = res.data.data;
    //！！！提示：首先打开弹框把“多选”勾选的数据置空，因为在之后会赋值选中的效果
    multipleTableRef.value.clearSelection();
    let itemGuidLists=[]
    data.AllTableData.forEach(item=>{
      itemGuidLists.push(item.itemGuid)
    })
    console.log(itemGuidLists)
    data.mytableData=res.data.data.filter(item=>{
      if(itemGuidLists.indexOf(item.itemGuid)<0){
        //备注：只显示未勾选的。只显示未选择的
        return true  
      }else{
        return false
      }
    })
    // data.AllTableData.forEach((row) => {
    //   data.mytableData.map((item) => {
    //     if (row.itemGuid == item.itemGuid) {
             //备注：显示所有，并勾选计划内选中的。显示：有选中和未选择的
             //!!!提示：设为true，多选框选中
    //       multipleTableRef.value.toggleRowSelection(item, true);
    //     }
    //   });
    // });
  });
};

代码(选中传数据):

确认

 四、inject注入式父子组件传参

父组件可以向子组件（无论层级）注入依赖，每个子组件都可以获得这个依赖，无论层级。

参考链接：依赖注入

 

代码：

//父组件

//子组件