Vue.js 3 中的 defineExpose 使用指南 - 暴露组件实例属性和方法 - 常规

`defineExpose` 是 Vue 3 中为于公开组件实例的方法，使得它可以被父组件访问。通过 `defineExpose`，惠可以选择性地将组件实例的一些属性或方法推出给父组件。以下是 `defineExpose` 的基本使用方式。 1. 在组件的 `setup` 函数中，使用 `ref` 或 `reactive` 创建一个响应性的对象，作为存储要推出给父组件的属性或方法。 javascript
import { defineComponent, ref, defineExpose } from 'vue';

const MyComponent = defineComponent({
 setup() {
 const message = ref('Hello');

 // 使用 defineExpose 将 message 推出给父组件
 defineExpose({
 message,
 });

 return {
 message,
 };
 },
});
 2. 在父组件中，可以通过 `$refs` 来访问到子组件的实例，并直接访问被推出的属性或方法。 html
<template>
 <div>
 <my-component ref='myComponentRef'></my-component>
 <button @click='showMessage'>Show Message</button>
 </div>
</template>

<script>
import { ref } from 'vue';

export default {
 mounted() {
 // 访问子组件的 message 属性
 console.log(this.$refs.myComponentRef.message);
 },
 methods: {
 showMessage() {
 // 调用子组件的方法
 this.$refs.myComponentRef.sayHello();
 },
 },
};
</script>
 通过 `defineExpose`，我们可以将子组件的内部状态或方法推出给父组件，并在父组件中进行访问和调用。需要注意的是， `defineExpose` 只能在 `setup` 函数中调用，并且只能在 `setup` 函数的返回对象中返回响应性对象。