Vue3如何在父组件中触发子组件的方法

在vue3中推出了<script setup>的语法糖，这个语法糖可以的减少我们的代码量，但是我们如何在<script setup>中拿到子组件中的方法呢？

Vue3中的父组件中<script setup>触发子组件的方法主要有两种

父组件

<LoginAccount ref="accountRef"></LoginAccount>

<script lang="ts" setup>
import LoginAccount from './login-account.vue'
import { ref } from 'vue'

const accountRef = ref<InstanceType<typeof LoginAccount>>()

const handleLoginClick = () => {
  console.log('ok', accountRef.value)
  accountRef.value?.loginAction()
}
</script>

方法一：在子组件中使用defineComponent

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const loginAction = () => {
      console.log('登录');
    }

    return {
      loginAction,
    }
  }
})
</script>

方法二：使用defineExpose

<script lang="ts" setup>
import { reactive, ref, defineExpose } from 'vue'

const loginAction = () => {
  console.log('登录');
}

defineExpose({
  loginAction
})
</script>