zoukankan      html  css  js  c++  java
  • vue.$refs 的用法

      官网给出的解释是:

        被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

          1.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;

          2.如果用在子组件上,引用就指向组件实例。

        eg: 

          <p ref="p"></p>     //  vm.refs.p    指向 DOM节点

          <child-temp  ref="child"></child-temp>    //  vm.$refs.child    指向子组件

          

        code: 

      上面的实例我们在调用的时候:

         ...

         methods: {

            fg(){

              this.$refs.listGroup.style.color = 'red'       //   可以操作Dom 节点

              console.log(this.$refs.listGroup.length)      //    实例含有v-for  结构,这里操作的就是 遍历的数组了。

            }

          }

        总结:

        使用 $refs 减少了 Dom 操作对页面的性能影响。

           关于js操作dom 对性能影响 可访问: http://www.cnblogs.com/yepbug/p/5427213.html 

          

          1.  当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

          2.  关于ref注册时间的重要说明:

             因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!

             $refs 也不是响应式的,因此不应该试图用它在模版中做数据绑定。

          

  • 相关阅读:
    cocoapods的安装与使用
    HBase源代码分析之HRegion上MemStore的flsuh流程(二)
    everything of people’s life can changed in their twenties
    java 操作流的步骤
    java 流
    java 文件过滤器 java.io.FilenameFilter
    java 递归(Recursion)
    java IO的概述和File方法
    java 泛型的嵌套(map例子)
    java 泛型接口和方法
  • 原文地址:https://www.cnblogs.com/zccblog/p/7274462.html
Copyright © 2011-2022 走看看