美文网首页
13-Vue特殊属性-ref

13-Vue特殊属性-ref

作者: 仰望_IT | 来源:发表于2020-05-06 15:45 被阅读0次

    一、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>
    

    相关文章

      网友评论

          本文标题:13-Vue特殊属性-ref

          本文链接:https://www.haomeiwen.com/subject/qqewghtx.html