华为网站开发流程,青岛建设银行网站,黑马程序员线上课程多少钱,yellow片高清影视在线观看如果阅读有疑问的话#xff0c;欢迎评论或私信#xff01;#xff01; 本人会很热心的阐述自己的想法#xff01;谢谢#xff01;#xff01;#xff01; 文章目录 模板引用前言访问模板引用模板引用与v-if、v-show的结合v-for中的模板引用函数模板引用 模板引用
前言 … 如果阅读有疑问的话欢迎评论或私信 本人会很热心的阐述自己的想法谢谢 文章目录 模板引用前言访问模板引用模板引用与v-if、v-show的结合v-for中的模板引用函数模板引用 模板引用
前言
在前面学过的 v-on v-if v-show 等指令都是对DOM操作的抽象指令而有时我们需要直接访问底层DOM元素。例如在我们刚挂载完组件实例时想要将一个input输入框聚焦。参照之前的知识好像无法完成在该章节我们可以使用vue提供的ref属性。我们称为模板引用。
语法
input refinput访问模板引用
挂载结束后ref属性都会被暴露在this.$refs之上例如我们之前的场景
templatepAsk a yes/no question:input v-modelsome.nested.question :disabledloading refmyInput/button clicksome.nested.question b?点我/button/pp{{ answer }}/p
/template
scriptexport default {mounted() {this.$refs.myInput.focus()}
}
/script注意这里ref属性值只有在挂载之后才可以被访问在挂载之间一直是undefined状态。因为我们的DOM在挂载前还没有被渲染也就是ref还没有通知给引擎。例如
scriptexport 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不会抛出错误因为两个的渲染机制不一样。例如
templatepinput v-modelsome.nested.question :disabledloading refmyInput v-ifflag/ !-- Uncaught TypeError: Cannot read properties of undefined (reading focus) --input v-modelsome.nested.question :disabledloading refmyInput2 v-showflag/button clickflag !flag更改input显示/隐藏/button/p
/template
scriptexport default {data(){return{flag:false}},mounted() {this.$refs.myInput.focus();this.$refs.myInput2.focus();}
}
/script可以看出结果和我们预料的一样只有v-if才会报错。
v-for中的模板引用
官方文档中解释了在对v-for中使用模板引用时$refs中该属性是一个数组也就是我们可以对其使用数组的方法。例如
templateulli v-forcurrentValue in myArr refitems{{ currentValue.myNumber }}/li/ul/p
/templatescript
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。你当然也可以绑定一个组件方法而不是内联函数。
