defineExpose
是Vue3.0中的一个新API,它允许子组件暴露其内部属性或方法给父组件访问。可以通过将属性或方法添加到defineExpose
函数中来实现。
以下是一个简单的例子:
<template>
<child-component ref="childRef" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleClick() {
this.$refs.childRef.foo();
}
}
}
</script>
子组件:
<template>
<div>Child Component</div>
</template>
<script>
import { defineExpose } from 'vue';
export default {
setup() {
const foo = () => {
console.log('foo');
}
defineExpose({
foo
});
return {};
}
}
</script>
在父组件中,我们使用ref
属性引用了子组件,并且在父组件中定义了一个handleClick
方法,该方法会通过$refs
访问子组件。在子组件中,我们使用defineExpose
函数将foo
方法暴露给父组件。现在,父组件就可以通过$refs.childRef.foo()
调用子组件中的foo
方法了。
需要注意的是,defineExpose
函数必须在setup
函数中调用,否则会报错。并且,只有在子组件中的setup
函数中定义的属性或方法才能暴露给父组件,其他函数或变量将无法访问。