13-Vue特殊属性-ref

一、Vue特殊特性

Vue的特殊属性主要有：key、ref、is、slot，ref是Vue特殊属性之一

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过ref来获取

二、ref使用

1. 在需要获取的元素上添加ref属性

例如:

我是段落

2. 在使用的地方通过 this.$refs.xxx 获取

例如 this.$ref.myP

refs: 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例
注意：refs只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs 结语

三、ref特点

在讲ref特点之前我们先来回顾， 原生语法获取元素的特点

1. 如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素

例如： 通过原生的语法document.querySelector获取到的都是被渲染之后DOM元素， 也就是原生的元素

VUE官方并不推荐我们这样获取

image

    我是按钮
    
我是原生的DOM
    

在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取

2. ref添加到原生DOM上, 拿到的就是原生DOM

image

    我是按钮
    
我是原生的DOM

3. ref添加到组件上, 拿到的就是组件

拿到了组件后, 还可以访问组件中的数据

image

    我是按钮