[ Vue3 ] 组合式API + Setup语法糖如何获取组件实例？

Vue3 组合式API + Setup语法糖如何获取组件实例？

Vue2获取方式

在 Vue2 中，我们可以给组件设置 ref 属性后，就可以直接通过：this.$refs.HelloRef 来获取组件实例中所有的属性和方法

<template>
  <Hello ref="HelloRef" />
</template>

Vue3获取方式

在 Vue3 中，如果采用了组合式API，它是没有 this 的，所以写法与 Vue2 略有不同。我们可以这么做来获取组件中我们想要的数据

App.vue
首先老规矩，在 App.vue 中通过给 Hello.vue 子组件设置 ref 属性来获取子组件向父组件暴露的属性和方法

<template>
  <!-- 1. 给组件设置ref属性 -->
  <Hello ref="HelloRef" />

  <button @click="btn">获取组件实例</button>
</template>

<script lang="ts">
import { ref } from 'vue';
import Hello from './components/Hello.vue'

export default {
  setup() {
    interface Hello { info: string, func: () => void }

    // 2. 定义组件变量
    const HelloRef = ref<Hello | null>(null)

    const btn = () => {
      // 4. 获取组件实例
      console.log(HelloRef.value?.info); // Hello
      HelloRef.value?.func() // Hello Vue3!
    }

    return { btn }
  }
}
</script>

Hello.vue
在 Hello.vue 子组件中通过 return 暴露出父组件需要的属性和方法即可

<template>
    <h1>Hello</h1>
</template>

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

export default {
    setup() {
        const info = ref<string>("Hello")

        const func = () => {
            console.log("Hello Vue3!");
        }

        return { info, func }
    }
}
</script>

使用 setup 语法糖

但如果使用了 setup 语法糖，则需要用到 defineExpose 宏函数来解决这个问题。

App.vue

<template>
  <Hello ref="HelloRef" />

  <button @click="btn">获取组件实例</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Hello from './components/Hello.vue'

interface Hello { info: string, func: () => void }

const HelloRef = ref<Hello | null>(null)

const btn = () => {
  console.log(HelloRef.value?.info); // Hello
  HelloRef.value?.func() // Hello Vue3!
}
</script>

Hello.vue
在 Hello 组件中，通过 defineExpose 将需要暴露给父组件的属性和方法导出

<template>
   <h1>Hello</h1>
</template>

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

const info = ref<string>("Hello")

const func = () => {
   console.log("Hello Vue3!");
}

// 3. 通过 defineExpose 暴露属性 / 方法

// js写法
// defineExpose({ info, func })

// ts写法
defineExpose<{ info: Ref<string>, func: () => void }>({ info, func })
</script>