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

相关推荐
Amd7941 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You10 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生21 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410924 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap36 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish44 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js