东莞优秀网站建设免费网站搭建

defineExpose通俗来讲，其实就是讲子组件的方法或者数据，暴露给父组件进行使用，这样对组件的封装使用，有很大的帮助，那么defineExpose应该如何使用，下面我来用一些实际的代码，带大家快速学会defineExpose的使用

1.子组件：子组件有方法increaseCount，和数据count，现在我们将这他们全部暴露出去。

<template><div><h1>子组件, 对defineExpose进行处理</h1><button @click="increaseCount">Increase Count</button><p>Count: {{ count }}</p></div>
</template><script setup lang="ts">
import { ref } from 'vue';const count = ref(0)
const increaseCount = () => {count.value++;
};
defineExpose({count,increaseCount
})</script>
<style scoped lang="less">
</style>

2.父组件：我们为子组件定义ref为childexpose，这里有一个问题，如果这样let childexpose = ref(null)声明，ts会提示“childexpose.value”可能为 “null”。所以直接let childexpose = ref()，ts就不会报错

在调用方法的时候，直接childexpose.value.increaseCount()就可以拿到他的方法，并且子组件的数据也会同步更新

<template><div><dExpose ref="childexpose"></dExpose><a-button type="primary" status="warning" @click="getChild">Primary</a-button>{{nums}}</div>
</template><script setup lang="ts">
import { ref,onActivated  } from "vue";
import dExpose from './components/defineExpose.vue'let nums = ref(null)
let childexpose = ref()// 调用子组件的方法
const getChild = ()=>{childexpose.value.increaseCount()nums.value = childexpose.value.count  
}</script>
<style scoped lang="less">
ul {list-style-type: none;li {height: 30px;line-height: 30px;background-color: aqua;margin-bottom: 10px;}
}
</style>