vue3怎么根据字符串获取组件实例

Lysun0012024-11-21 8:26

例子：

我在使用vue2开发的时候，定义了一个方法

handler(strRef){ this.$refs[strRef].innerText = 'hello world' }，

我在点击某个按钮的时候，调用了方法handler，传递了一个参数是字符串 'condition'，然后方法中通过 this.$refs[strRef] 后去到绑定 ref = 'condition' 的组件，我在vue3中也需要通过这样的方法获取到相关组件

我们可以通过

import { getCurrentInstance } from 'vue'

const instance: any = getCurrentInstance()

获取到当前的组件实例，其中 instance 就是当前组件实例，

组件代码：

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

const instance: any = getCurrentInstance()

const xxx = ref('hello world')
const xxxInstance = ref(null)

onMounted(() => {
  console.log(instance, 'instance')
})
</script>
<template>
  <h1 ref="xxxInstance">{{ xxx }}</h1>
</template>

<style lang="less" scoped></style>

下面我们来输出一下，看看 instance 下面都有什么

可以看到 instance 下面存在 refs 对象，其中存在的就是绑定的各个组件实例

所以当 strRef 是字符串变量时，我们可以通过 instance.refs[strRef] 的方法获取到相关的组件实例