vue3父组件直接调用子组件的方法 ＜ script setup＞ 中

defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

例如：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)。

子组件：

<script setup>
import { defineExpose } from 'vue';
//父组件要调用的方法
const refresh = () => {
    alert('子组件的方法执行')
}
//组件暴露自己的属性
defineExpose({ refresh })
</script>

父组件：

<template>
    <child ref="child"></child>
    <el-button type="primary" @click="parentClick()">click</el-button>
</template>
<script setup>
import { ref } from 'vue'
import child from '@/components/child.vue'

const child = ref()
//点击按钮调子组件的refresh方法
const parentClick = () => {
    child.value?.refresh()
};
</script>