vue中$refs是什么意思,vue 的ref

　　本文主要介绍在Vue中使用ref和$refs的相关信息。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友可以在下面和边肖一起学习。

前言

　　在JavaScript中，需要通过document.querySelector(#demo )获取dom节点，然后获取这个节点的值。在Vue中，我们不需要获取dom节点。元素用ref绑定后，可以通过这个直接调用。$refs，可以减少获取dom节点的消耗。

ref介绍

　　Ref用于注册元素或子组件的参考信息。引用信息将注册在父组件的refs对象上。如果用在普通的DOM元素上，引用指向DOM元素；如果用在子组件上，引用指向子组件实例。

　　一般来说，ref特性是给一个元素或者子组件一个ID引用，通过这个访问元素或者子组件的实例。$refs.refName

　　你好/p

　　children ref= children /儿童

　　这个。$参考文献. p

　　这个。$refs.children

this.$refs介绍

　　这个。$refs是一个保存所有DOM元素和用当前组件中的ref属性注册的子组件实例的对象。

　　注意：$refs仅在组件渲染完成后填充，在初始渲染时无法访问它们，且无响应，因此无法用于模板中的数据绑定。

　　注意：

　　当ref与v-for一起使用时，获得的引用将是一个包含循环数组源的数组。

　　模板

　　差异

　　div ref=myDiv v-for=(item，index)in arr :key= index { { item } }/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　arr: [一，二，三，四]

　　}

　　},

　　已安装(){

　　console.log(这个。$refs.myDiv)

　　},

　　方法：{}

　　}

　　/脚本

　　style lang=sass 范围

　　/风格

实例（通过ref特性调用子组件的方法）

　　【1】子组件code：

　　模板

　　div{{msg}}/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　消息：“我是一个子组件”

　　}

　　},

　　方法：{

　　changeMsg() {

　　This.msg= transformation

　　}

　　}

　　}

　　/脚本

　　style lang=sass scoped/style

　　[2]母组件代码：

　　模板

　　div @click=parentMethod

　　children ref= children /儿童

　　/div

　　/模板

　　脚本

　　从“components/children.vue”导入子项

　　导出默认值{

　　组件：{

　　孩子们

　　},

　　data() {

　　返回{}

　　},

　　方法：{

　　parentMethod() {

　　这个。$refs.children //返回一个对象

　　这个。$ refs . children . changeMsg()//调用children的changemsg方法

　　}

　　}

　　}

　　/脚本

　　style lang=sass scoped/style

总结

　　关于Vue中ref和$refs的介绍和使用的这篇文章到此为止。关于在Vue中使用ref和$refs的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。