defineExpose暴漏子组件的属性和方法！！！

本文主要是介绍defineExpose暴漏子组件的属性和方法！！！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

<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就可以调用子组件中暴漏出来的方法和属性了。

<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>

这篇关于defineExpose暴漏子组件的属性和方法！！！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---