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

相关推荐
理想不理想v1 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云11 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058713 分钟前
web端手机录音
前端
齐 飞19 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹36 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint