需求：需要在父组件中使用子组件的方法或者属性

一、在子组件中定义方法，并将其暴漏出来

首先我引入了一个抽屉组件，通过open方法设置打开抽屉，然后通过difineExpose将open方法暴漏出来。

1、封装一个抽屉组件

<template><el-drawer v-model="drawer" title="请选择商品" size="70%"></el-drawer>
</template>

2、定义一个方法，声明你要做的事情，我这里要声明一个方法用来控制是否打开抽屉。

const open = () => {drawer.value = true;
};

3、将这个方法暴漏出去，供父组件调用。

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
//将抽屉暴露出去，供父组件调用
defineExpose({ open });
</script>

整体代码：

<template><el-drawer v-model="drawer" title="请选择商品" size="70%"></el-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
//定义一个方法控制抽屉的开关
const open = () => {drawer.value = true;//再次打开抽屉时清空上次所勾选的商品if (productTable.value != undefined) {productTable.value.clearSelection();}
};
//将抽屉暴露出去，供父组件调用
defineExpose({ open });
</script>

二、在主页面中引入子组件。

在使用组件时定义一个ref属性，然后通过const  openShow= ref() ;将这个方法声明出来，然后通过打点调value就可以调用子组件中暴漏出来的方法和属性了。

1、首先在父组件中引入子组件。

<template>
<PickProduct ref="openShow" v-model="selectProducts"></PickProduct>
</template>
<script setup lang="ts">
import PickProduct from "@/components/PickProduct.vue";
</script>

 2、定义该组件的ref属性，并声明出来、

<template>
<PickProduct ref="openShow" v-model="selectProducts"></PickProduct>
</template>
<script setup lang="ts">
import { ref } from "vue";
import PickProduct from "@/components/PickProduct.vue";//定义组件的方法
const openShow = ref();
</script>

3、通过父组件中的ref去调用子组件中暴漏出来的方法。

//获取商品触发的事件
const openProduct = () => {openShow.value.open();
};

完整代码：

<template>
<PickProduct ref="openShow" v-model="selectProducts"></PickProduct>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import PickProduct from "@/components/PickProduct.vue";//定义组件的方法
const openShow = ref();//获取商品触发的事件
const openProduct = () => {openShow.value.open();
};
</script>