Vue3 的 expose 介绍

在 Vue 3 中，expose 是一个用于控制组件内部方法和属性暴露给父组件的新功能。这使得父组件可以调用子组件内部的方法或访问其数据，尤其在使用组合式 API（Composition API）时，这种能力非常有用。

1. 基本用法

expose 是一个函数，可以在 setup 函数中调用，用来暴露组件内部的属性和方法。这些被暴露的内容可以被父组件通过 ref 实例来访问和调用。

2. 举例 🌰

子组件

import { defineComponent, ref } from "vue";
export default defineComponent({
  setup(_, { expose }) {
    name: 'Child'
    // 定义组件内部的属性和方法
    const message = ref('I am child component message');
    const method = () => {
      console.log('I am child component method');
    }
    // 暴露这些属性和方法
    expose({
      message,
      method
    });

    return () => (
      <div style={{ color: 'red' }}>Child Component</div>
    );
  }
});

父组件

import { defineComponent, onMounted, ref } from "vue";
import Child from "./Child";

export default defineComponent({
  setup() {
    name: 'Father'
    const childRef = ref();
    const childValue = ref('');
    // 方法来调用子组件的暴露方法
    function callChildMethod() {
      if (childRef.value) {
        childRef.value.method();
      }
    }
    // 读取子组件的暴露属性
    onMounted(() => {
      if (childRef.value) {
        childValue.value = childRef.value.message;
      }
    });
    return () => (
      <div>
        <Child ref={childRef} />
        <button onClick={callChildMethod} style={{ border: 'none' }}>Call Child Method</button>
        <p style={{ color: 'orange' }}>Child value: {childValue.value}</p>
      </div>
    );
  }
});

浅浅解读一下

1）setup 是 Vue3 的组合式 API 中的一个函数，它用于定义组件的响应式状态、计算属性、方法等。它接收两个参数：props 和 context。其中，context 对象包含了 expose 和 emit 等函数。

2）在 setup 函数中调用 expose，传入一个对象，这个对象包含了希望暴露给父组件的属性和方法。父组件可以通过引用子组件实例来访问这些暴露的内容。

3. 注意事项

1、暴露的内容必须是响应式的

当使用 expose 时，需要确保暴露的数据是响应式的，以便父组件可以正确地感知到数据的变化。

2、暴露的接口仅在子组件中有效

只有暴露给父组件的内容可以通过 ref 访问，组件内部的其他内容（例如局部变量）不会被暴露。

3、避免滥用

虽然 expose 提供了很大的灵活性，但过度使用可能会导致组件之间的耦合度增加，从而影响组件的可维护性。尽量保持组件的接口简洁，避免暴露不必要的内容。

4、组合式 API 的用法

expose 与组合式 API 的 setup 函数配合使用。在 setup 中暴露的内容只能通过 expose 明确声明，而不是直接通过 this 访问。

5、expose 的时机

确保在 setup 函数中调用 expose 时，已经完成初始化，这样可以确保父组件在访问这些属性和方法时不会出现未定义的情况。