官方解释:
使用 <script setup>
的组件是默认关闭的——即通过模板引用或者 $parent
链获取到的组件的公开实例,不会暴露任何在 <script setup>
中声明的绑定。
可以通过 defineExpose
编译器宏来显式指定在 <script setup>
组件中要暴露出去的属性:
当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number }
(ref 会和在普通实例中一样被自动解包)
通俗的讲:父组件可以通过defineExpose
获取子组件的实例
应用场景:当子组件的按钮都在父组件,需要统一在父组件点击按钮后操作就可以使用这种方法(个人使用场景推荐);
例子:
//子组件——————defineExpose出组件中的a变量和loadList 函数,父组件就可以直接通过实例使用
<script setup lang="ts">
import { ref } from 'vue'
const a = ref(2)
// loadList 函数
const loadList = (item: any) => {
console.log(item)
}
defineExpose({
a,
loadList
})
</script>
<template>
<div>child</div>
</template>
//父组件————在引入的子组件身上定义ref="childeRef"
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ChildComponent from '@/views/articles/ChildComponent.vue'
const childeRef = ref()
onMounted(() => {
childeRef.value.loadList([{ id: 1, name: '22' }]) // 调用子组件函数
})
</script>
<template>
<ChildComponent ref="childeRef"></ChildComponent>
</template>