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属性

例如: <p ref="myP">我是段落</p>

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

例如 this.$ref.myP

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

三、ref特点

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

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

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

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

image

<div id="app">
    <button @click="myFn">我是按钮</button>
    <p>我是原生的DOM</p>
    <one></one>
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>

<script>
    Vue.component('one', {
        template: '#one'
    });
    new Vue({
        el: '#app',
        methods: {
            myFn() {
                console.log(document.querySelector('p'));
                console.log(document.querySelector('#myOne'));
            }
        }
    });
</script>

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

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

image

<div id="app">
    <button @click="myFn">我是按钮</button>
    <p ref="myP">我是原生的DOM</p>
</div>

<script>
    new Vue({
        el: '#app',
        methods: {
                console.log(this.$refs);    // 这里的$refs是一个对象
                console.log(this.$refs.myP);
            }
        }
    });
</script>

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

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

image

<div id="app">
    <button @click="myFn">我是按钮</button>
    <one ref="myOne"></one>
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>

<script>
    Vue.component('one', {
        template: '#one',
        data: function () {
            return {
                msg: 'Vue-特殊属性-ref'
            }
        },
        methods: {
            say(){
                console.log('say');
            }
        }
    });
    new Vue({
        el: '#app',
        methods: {
            myFn() {
                console.log(this.$refs);
                console.log(this.$refs.myOne);
                console.log(this.$refs.myOne.msg);
                console.log(this.$refs.myOne.say);
            }
        }
    });
</script>