Vue3 组合式API如何获取组件实例?
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>
注意: 在组合式API setup
语法糖中子组件不通过 defineExpose
将属性 / 方法暴露出去,父组件是无法获取到对应数据的