useTemplateRef使用

模板引用 | Vue.js (vuejs.org)

1、使用ref方式：

注意ref属性接收的不是一个ref变量，而是ref变量的名称。

<template>
  <div>
    <input type="text" ref="inputEl" />
    <button @click="setInputValue">给input赋值</button>
  </div>
</template>

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

const inputEl = ref<HTMLInputElement>();

function setInputValue() {
  if (inputEl.value) {
    inputEl.value.value = "Hello, world!";
  }
}

</script>

2、使用useTemplateRef方式

在Vue3.5中新增了一个 useTemplateRef函数。

useTemplateRef函数的用法很简单：只接收一个参数 key，是一个字符串。返回值是一个ref变量。

其中参数key字符串的值应该等于template中ref属性的值。

返回值是一个ref变量，变量的值指向模版引用的DOM元素或者子组件。

<template>
  <input type="text" ref="inputRef" />
  <button @click="setInputValue">给input赋值</button>
</template>

<script setup lang="ts">
import { useTemplateRef } from "vue";

const inputEl = useTemplateRef<HTMLInputElement>("inputRef");
  
function setInputValue() {
  if (inputEl.value) {
    inputEl.value.value = "Hello, world!";
  }
}
</script>

3、使用useTemplateRef的应用：动态切换ref绑定的变量

在这个场景template中ref绑定的就是一个变量 refKey，通过点击 切换ref绑定的变量按钮可以切换 refKey的值。相应的，绑定input输入框的变量也会从 inputEl1变量切换成 inputEl2变量。

<template>
	<input type="text" :value="refKey" />
  <input type="text" ref="inputEl1" />
  <input type="text" ref="inputEl2" />
  <button @click="switchRef">切换ref绑定的变量</button>
  <button @click="setInputValue">给input赋值</button>
</template>

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

const refKey = ref("inputEl1");
const inputEl1 = useTemplateRef<HTMLInputElement>("inputEl1");
const inputEl2 = useTemplateRef<HTMLInputElement>("inputEl2");
  
function switchRef() {
  refKey.value = refKey.value === "inputEl1" ? "inputEl2" : "inputEl1";
}

function setInputValue() {
  const curEl = refKey.value === "inputEl1" ? inputEl1 : inputEl2;
  if (curEl.value) {
    curEl.value.value = "Hello, world!";
  }
}
</script>