Q Code

遇事不决 可问春风 春风不语 遵循自心

vue3学习笔记之$refs

在vue3 的setup()中如何拿到子组件或字节点？如何实现类似$refs的功能？

举个栗子🌰, 想实现渲染完成后input输入框自动获焦点的效果

模版:

1
2
3
4
5
<template>
  <div class="container">
    <el-input v-model="inputValue" ref="inputRef" @input="inputChange" placeholder="请输入内容"></el-input>
  </div>
</template>

效果图:
image

方式1.ref()

通过ref()函数可以实现类似$refs功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref, defineComponent, onMounted } from "vue";
export default defineComponent({
  setup () {
    const inputRef = ref();
    onMounted(() => {
      inputRef.value.focus();
    });
    const inputChange = v => {
      console.log(v);
    }
    return {
      inputValue: ref(""),
      inputRef,
      inputChange
    }
  }
})

方式2.getCurrentInstance()

getCurrentInstance 允许访问对高级用法或库创建者有用的内部组件实例。 –官方文档介绍

所以可以使用该方法实现 this的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref, defineComponent, onMounted, getCurrentInstance } from "vue";
export default defineComponent({
  name: "Home",
  setup () {
    const internalInstance = getCurrentInstance();
    onMounted(() => {
      internalInstance.ctx.$refs.inputRef.focus();
    });
    const inputChange = v => {
      console.log(v);
    }
    return {
      inputValue: ref(""),
      inputChange
    }
  }
})

tip: 官方文档中明确说明getCurrentInstance使用限制链接

vue