「译」 VueDose Tip 30 - 在 Vue.js 3 Composition API 中访问模板中的 ref
晨曦 2020-02-05 Vue 3VueDose文章翻译
你已经在上一个 Tip 在 Vue.js 3 Composition API 中访问实例属性中，看到了如何使用新语法访问实例属性。
但是，你如果读过上一个 Tip，你已经了解到我们钟爱的 this.$refs 并不包含在 setup context 对象 中。
那么，如何在 Composition API 中使用模板 ref 呢？
这可能比你想象的要简单！重点就是，Vue.js 统一了 refs 的概念，所以你只需要使用你已经知道的用来声明响应式变量的 ref() 函数，即可声明模板 ref。
请记住，ref 名称必须与变量名称相同。让我来说明一下。对于模板：
<template>
<div>
<h2 ref="titleRef">{{ formattedMoney }}</h2>
<input v-model="delta" type="number" />
<button @click="add">Add</button>
</div>
</template>
1
2
3
4
5
6
7
2
3
4
5
6
7
我已经在 <h2> 标签上设置了 titleRef。一切都在模板上操作的。现在在 setup 函数中，你需要声明一个与 titleRef 相同名字的 ref，例如将其初始化为 null：
export default {
setup(props) {
// Refs
const titleRef = ref(null);
// Hooks
onMounted(() => {
console.log("titleRef", titleRef.value);
});
return {
titleRef
// ...
};
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
你可以通过 .value 属性访问这个 ref 的值，就像访问其它响应式变量一样。你如果按照示例中所示进行操作，则应该在控制台中看到结果 titleRef <h2>10.00</h2>。