【vue.js】文档解读【day 5】| ref模板引用

如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！

模板引用

前言

在前面学过的 v-on v-if v-show 等指令都是对DOM操作的抽象指令，而有时我们需要直接访问底层DOM元素。例如在我们刚挂载完组件实例时，想要将一个input输入框聚焦。参照之前的知识好像无法完成，在该章节我们可以使用vue提供的ref属性。我们称为模板引用。

语法：

<input ref="input">

访问模板引用

挂载结束后，ref属性都会被暴露在this.$refs之上，例如我们之前的场景：

<template><p>Ask a yes/no question:<input v-model="some.nested.question" :disabled="loading"  ref="myInput"/><button @click="some.nested.question = 'b?'">点我</button></p><p>{{ answer }}</p>
</template>
<script>export default {mounted() {this.$refs.myInput.focus()}
}
</script>

注意，这里ref属性值只有在挂载之后才可以被访问，在挂载之间一直是undefined状态。因为我们的DOM在挂载前还没有被渲染，也就是ref还没有通知给引擎。例如

<script>export default {created(){this.$refs.myInput.focus();}
}
//Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
</script>

模板引用与v-if、v-show的结合

我们通过上面可以知道ref属性只有在被渲染之后才可以访问到其中的值，那么我们可以联想到前面所讲的v-if和v-show的知识。如果我们ref所在的DOM元素包含v-if或者v-show会产生什么样的结果呢？结合我们学习到的知识，我觉得应该v-if会抛出错误，v-show不会抛出错误，因为两个的渲染机制不一样。例如：

<template><p><input v-model="some.nested.question" :disabled="loading"  ref="myInput" v-if="flag"/> <!--  Uncaught TypeError: Cannot read properties of undefined (reading 'focus') --><input v-model="some.nested.question" :disabled="loading"  ref="myInput2" v-show="flag"/><button @click="flag = !flag">更改input显示/隐藏</button></p>
</template>
<script>export default {data(){return{flag:false}},mounted() {this.$refs.myInput.focus();this.$refs.myInput2.focus();}
}
</script>

可以看出结果和我们预料的一样，只有v-if才会报错。

v-for中的模板引用

官方文档中解释了在对v-for中使用模板引用时，$refs中该属性是一个数组，也就是我们可以对其使用数组的方法。例如：

<template><ul><li v-for="currentValue in myArr" ref="items">{{ currentValue.myNumber }}</li></ul></p>
</template><script>
export default {data() {var myArr = [{myNumber: 1},{myNumber: 2},{myNumber: 3},{myNumber: 4},];return {myArr};},mounted() {console.log(this.$refs.items); //(4) [li, li, li, li]},
};
</script>

在上方代码中我们可以看出this.$refs.items会输出一个数组，那么我们可以使用this.$refs.items[0]访问得到第一个元素。

但是官方文档说不保证this.$refs.items与源数组相同的顺序。也就是我们在使用这个方法时需要查看一下是不是该元素，也可以使用数组中的indexOf来查找位置之后再使用该方法。

函数模板引用

对于ref中的值，我们可以是任意字符串，在mounted中使用this.$refs来引用。如果我们想要将这个DOM元素传入一个属性或者一个方法，我们可以使用函数模板引用。例如：

<button  :ref="(el)=>{console.log(el)}">按钮</button> //<!-- <button>按钮</button> -->

在使用函数模板引用时，ref是一个动态属性，需要使用v-bind来绑定。当绑定的元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null。你当然也可以绑定一个组件方法而不是内联函数。