Vue3 的 expose 介绍

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

1. 基本用法

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

2. 举例 🌰

子组件

javascript 复制代码
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>
    );
  }
});

父组件

javascript 复制代码
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 时,已经完成初始化,这样可以确保父组件在访问这些属性和方法时不会出现未定义的情况。

相关推荐
慧一居士31 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead33 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js