vue3 defineExpose
时间: 2023-08-28 22:17:58 浏览: 96
在 Vue 3 中,`defineExpose` 是一个组件选项,用于公开组件实例的一些方法或属性给其父组件。通过在组件内部调用 `defineExpose` 方法并传入一个对象,可以将需要公开的方法或属性添加到该对象中。这样,在父组件中就可以通过访问子组件实例的 `$refs` 属性来获取这些公开的方法或属性。
这种方式可以代替 Vue 2 中使用 `$attrs` 和 `$listeners` 的方式来实现组件之间的通信。使用 `defineExpose` 可以更明确地定义需要公开的接口,提供更好的可维护性和类型检查。
以下是一个示例:
```javascript
// 子组件
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
// 公开 increment 方法给父组件
defineExpose({
increment
});
return {
count
};
}
}
// 父组件
<template>
<ChildComponent ref="childRef" />
<button @click="handleClick">调用子组件方法</button>
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
阅读全文