• 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 也不是响应式的,因此不应该试图用它在模版中做数据绑定。

          

  • 相关阅读:
    杨中科 向HtmlAgilityPack道歉:解析HTML还是你好用
    感觉这个JQuery不错,查询方便
    数据库异步操作
    Command 设计模式
    osg 细节裁剪 SAMLL_FEATURE_CULLING
    errno错误代码
    清空std::stringstream
    eclipse android javabuilder +CDTbuilder
    mfc c++ system调用 控制台窗口
    Androidndkr8e wordlist 第二个参数不是数值参数
  • 原文地址:https://www.cnblogs.com/zccblog/p/7274462.html
Copyright © 2020-2023  润新知