defineExpose
这个方法是vue3 3.2+ 版本新增的,大概意思就是 在 <script setup>
组件中明确要暴露出去的属性,使用 defineExpose
编译器宏,简单的用法如下:
# 子组件代码片段
<script setup>
import {ref} from "vue";
function childFn() {
console.log('我是子组件');
}
const msg = 'Hello World';
const num = ref(0);
defineExpose({ //
msg,
num
});
</script>
#父组件代码片段
<Index ref="I"></Index>
<script setup>
import Index from "./index.vue";
const I = ref(null);
function test() {
console.log(I.value.msg) // Hello World
}
</script>