Vue3 expose() 函数

Vue3 选项式 API

在 Vue3 中，expose() 函数是一个用于在组合式 API 中暴露组件内部方法和属性的工具。

expose() 通常与 setup() 函数一起使用，允许开发者明确指定哪些组件内部的属性和方法可以被外部访问。

为什么需要 expose() 函数？

在 Vue2 中，组件的属性和方法默认是公开的，外部可以直接访问。然而，这种设计可能会导致一些问题，例如：

安全性问题：内部方法被意外暴露，可能会导致不安全的操作。
维护性问题：难以追踪哪些属性和方法是被外部使用的，增加了维护的复杂性。

Vue3 引入了 expose() 函数，允许开发者更精确地控制组件的公共接口，从而解决上述问题。

如何使用 expose() 函数？

基本语法

实例

export default {
setup(props, context) {
const internalMethod = () => {
console.log('This is an internal method');
};

const publicMethod = () => {
console.log('This is a public method');
};

// 暴露 publicMethod 方法
context.expose({
publicMethod
});

return {
internalMethod
};
}
};

解释

在上面的代码中，我们定义了两个方法：internalMethod 和 publicMethod。通过 context.expose()，我们只暴露了 publicMethod，而 internalMethod 则不会被外部访问。

示例场景

1. 父子组件通信

假设我们有一个父组件和一个子组件，父组件需要调用子组件的某个方法。

子组件

实例

export default {
setup(props, context) {
const childMethod = () => {
console.log('Child method called');
};

context.expose({
childMethod
});

return {};
}
};

父组件

实例

import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
setup() {
const childRef = ref(null);

onMounted(() => {
if (childRef.value) {
childRef.value.childMethod();
}
});

return {
childRef
};
}
};

2. 封装组件库

在开发组件库时，我们可能希望只暴露一部分方法和属性，以保持组件的封装性和安全性。

实例

export default {
setup(props, context) {
const internalState = ref('internal state');
const publicState = ref('public state');

const publicMethod = () => {
console.log('Public method called');
};

context.expose({
publicState,
publicMethod
});

return {
internalState
};
}
};

注意事项

多次调用 expose()：如果多次调用 expose()，只有最后一次调用的内容会被暴露。
与 ref 结合使用：在父组件中，可以通过 ref 引用子组件，并调用其暴露的方法。
兼容性：expose() 是 Vue3 的新特性，确保你的项目使用的是 Vue3 及以上版本。