Vue笔记 - $refs详解

$refs 详解

1. ref的注册与调用

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

  • 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素

    <!-- `vm.$refs.p`将会指向DOM元素 -->
    <p ref="pa">hello</p>
    

    在这种情况下，它几乎等价于原生JS中的DOM操作

    document.querySelector（".pa"）
    

  • 如果用在子组件上，引用就指向组件

    <!-- `vm.$refs.child`将会指向child组件-->
    <child-component ref="child"></child-component>
    

• 例子：

  <div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
  </div>
  
  <script>
  new Vue({
    el: "#app",
    methods:{
    add:function(){
      this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
      }
    }
  })
  </script>
  

2. ref的使用注意事项

1. 因为 ref 本身是作为渲染结果被创建的，所以在初始渲染的时候它们还不存在，也就不能访问。

   $refs 也不是响应式的，因此应该避免在模板或计算属性中访问 $refs

2. refs可以用于在父组件中直接调用子组件，但是仅仅作为一个紧急方法