父组件调用子组件方法

vue2

vue3

Father.vue

<template>
  <div>父组件</div>
  <button @click="onClick">点击 {{ num }}</button>
  <Son ref="sonRef"></Son>
</template>

<script setup lang="ts">
import Son from "./Son.vue";
import {ref} from "vue";
// 要定义和 ref="sonRef" 同名的响应变量
const sonRef = ref()

const num = ref<number>(0)

function onClick() {
  console.log('点击了父组件')
  const res = sonRef.value.onClickSon(num)
  console.log('点击了父组件', res)
  num.value = res
}
</script>

Son.vue

<template>
  <div>子组件 {{ sonNum }}</div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const sonNum = ref<number>(0)
function onClickSon(num: any) {
  console.log('触发了子组件的 onClickSon 方法', num.value)
  sonNum.value = num.value + 1
  console.log(sonNum.value, 'newNum')
  return sonNum.value
}

// 注意：一定要通过 defineExpose 将子组件的方法 onClickSon 暴露出去，父组件才能调用
defineExpose({
  onClickSon
})
</script>