[ 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); // HelloHelloRef.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); // HelloHelloRef.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>