steup下调用子组件方法

父组件：

<template>
  <base-child ref="childRef"></base-child>
  <button @click="childRef.show()">直接调用</button>
</template>
<script steup>
import { ref } from 'vue'
const childRef = ref()
</script>

1
2
3
4
5
6
7
8

子组件：

<template>
  <base-child ref="childRef"></base-child>
</template>
<script steup>
import { useContext } from 'vue'
const { expose } = useContext()

function show() {
  console.log('显示');
}
// 暴露方法
expose({
  show
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#vue3

上次更新: 2023/09/22, 16:54:32

← Vue3项目搭建 Vue3使用Typescript常见问题→