Vue中$refs的理解

$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。

描述

ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例，另外当v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app">

        <div ref="node">Node</div>

        <layout-div ref="layout"></layout-div>

        <div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>

    </div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    Vue.component("layout-div", {

      data: function(){

          return {

            count: 0

          }

      },

      template: `<div>

                    <div>{{count}}</div>

                </div>`

    })

    var vm = new Vue({

        el: '#app',

        mounted: function(){

            console.log(this.$refs.node); // <div>Node</div> // DOM元素

            console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例

            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组

        }

    })

</script>

</html>

因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。

<!DOCTYPE html>

<html>

<head>

    <title>Vue</title>

</head>

<body>

    <div id="app"></div>

</body>

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>

<script type="text/javascript">

    var vm = new Vue({

        el: '#app',

        data: function(){

            return {

                msg: 0

            }

        },

        template:  `<div>

                       <div ref="node">{{msg}}</div>

                       <button @click="updateMsg">button</button>

                    </div>`,

        beforeMount: function(){

            console.log(this.$refs.node); // undefined

        },

        mounted: function(){

            console.log(this.$refs.node); // <div>0</div>

        },

        methods: {

            updateMsg: function(){

                this.msg = 1;

                console.log(this.$refs.node.innerHTML); // 0

                this.$nextTick(() => {

                    console.log(this.$refs.node.innerHTML); // 1

                })

            }

        }

    })

</script>

</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://cn.vuejs.org/v2/api/#ref

https://zhuanlan.zhihu.com/p/50638655

https://juejin.im/post/5da58c54e51d4524e207fb92

Vue中$refs的理解的更多相关文章

  1. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  2. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  3. vue & button & refs & click & bug

    vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...

  4. vue中keepalive怎么理解？​---vue中文社区

    vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...

  5. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  6. vue渐进式开发的理解和指令

    1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...

  7. Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

  8. 理解MVVM在react、vue中的使用

    理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view)  :是应用程序中数据显示的部分. ...

  9. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

  10. 对vue中nextTick()的理解及使用场景说明

    异步更新队列: 首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的. 即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新 ...

随机推荐

  1. tempfs 的再学习

    tempfs 的再学习 背景 最近学习研究linux的内存buffer 和 cache相关的知识. 发现对linux的VFS的理解其实非常不到位. 再验证内存的使用的page caches和 drop ...

  2. [转帖]K8S 挂载 minio csi 的方式.

    对象存储   前置条件 安装Minio(在102主机上操作) 安装csi-s3插件(在103主机上操作) 使用 参考 本文介绍kubernetes如何基于对象存储(minio)创建PV与PVC 前置条 ...

  3. [转帖]2.2.1 Lightning 工作原理

    https://book.tidb.io/session2/chapter2/lightning-internal.html TiDB Lightning 工具支持高速导入 Mydumper 和 CS ...

  4. [转帖]echo 输出不换行-e \c

    http://www.my889.com/i/1952 在shell中,echo输出会自动换行.有时候在循环中不希望echo输出换行.代码实现如下: 1 echo -e " \c" ...

  5. [转帖]010 Linux 文本统计与去重 (wc 和 uniq)

    https://my.oschina.net/u/3113381/blog/5427461 wc 命令一般是作为组合命令的一员与其他命令一同起到统计的作用.而一般情况下使用 wc -l 命令较多. u ...

  6. elementui-自定表头和在input中遇见的问题

    第一个问题:无法关闭 弹出框 <el-table :data="tableData" style="width: 100%"> <el-tab ...

  7. TypeScript中泛型<T>详细讲解

    1.泛型 在定义函数或者接口或者类的时候 不能预先确定要使用的数据类型 而是在使用函数.接口.或者类的时候才能够确定数据类型 这个时候我们就需要使用的是泛型 2.功能描述 我们需要实现一个方法,方法中 ...

  8. HEVC扩展备用安装方法

    这个玩意微软商店免费但是下架了,购买需要RMB 安装 转到 https://store.rg-adguard.net/ 在左侧的下拉菜单选择"ProductId" 把链接中&quo ...

  9. # 继续前行github star突破8k即时通讯IM开源项目OpenIM版本发布计划

    项目简介 OpenIM继续领跑开源IM领域,在广大开发者的支持下,目前github star突破8k.在数据泄露.信息外泄.隐私滥用的时代,IM私有化部署需求旺盛.其中,政企协同办公对IM需求猛增,随 ...

  10. rider代码折叠

    可折叠元素块 rider那些元素块是可折叠?参考官方文档:Fold Code Elements Code folding works for the keywords if/ while/ else/ ...