13-Vue特殊属性-ref

Posted 2023-03-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了13-Vue特殊属性-ref相关的知识，希望对你有一定的参考价值。

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

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

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

例如 this.$ref.myP

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

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

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

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

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

Vue(基础五)_vue中用ref和给dom添加事件的特殊情况

一、前言

这篇文章涉及的主要内容有：

1、ref绑定在标签上是获取DOM对象

2、ref绑定在子组件上获取的是子组件对象

3、案列：自动获取input焦点

二、主要内容

1、基础内容：

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

（1）将ref绑定到标签上：测试之后发现在mounted()函数之后拿到的是button对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=‘app‘></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script>
        var App = {
            template:`
            <div class=‘app‘>
              <button ref=‘btn‘>我是按钮1</button>
            </div>`,

            created(){
                console.log(this.$refs.btn)
            },

            beforeMount:function(){
                console.log(this.$refs.btn);
            },

            mounted(){
                console.log(this.$refs.btn)//在这里才能拿到$refs.xxx
            }
        }


        new Vue({
            el:‘#app‘,
            data(){
                return {

                }
            },

            template:‘<App />‘,
            components:{
                App
            }
        })
    </script>
    
</body>
</html>

　　（2）将ref绑定到子组件上：拿到的是子组件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=‘app‘></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.component(‘subCom‘,{
            data(){
                return{

                }
            },

            template:`<div>
            这是子组件

            </div>`
        });

        var App = {
            data(){
                return{

                }
            },
            template:`<div>
              <button ref=‘btn‘>我是按钮1</button>
              <button ref=‘btn2‘>我是按钮2</button>
              <subCom ref=‘a‘></subCom>

            </div>`,//这里拿到的是子组件对象
            created(){
                console.log(this.$refs.btn);
            },

            beforeMount(){
                console.log(this.$refs.btn);
            },
            mounted(){
                console.log(this.$refs.btn);
                console.log(this.$refs.btn2);
                console.log(this.$refs.a);
            }
        }

        new Vue({
            el:‘#app‘,
            data(){
                return{}
            },
            template:‘<App/>‘,
            components:{
                App

            }
        })
    </script>
    
</body>
</html>

2、自动获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=‘app‘></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var App = {
            data: function (){
                return {
                    isShow:false
                }
            },
            template:`<div class=‘app‘>
            <input type=‘text‘ v-show=‘isShow‘ ref = ‘input‘/>

            </div>`,
            //$nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据后使用$nextTick可以获取更新之后的DOM
            mounted:function(){
                this.isShow = true;
                console.log(this.$refs.input);
                this.$nextTick(function() {
                    this.$refs.input.focus();
                })
            }
        }
        new Vue({
            el:‘#app‘,
            data:function(){
                return {

                }
            },

            template:‘<App/>‘,
            components:{
                App
            }
        });
    </script>
    
</body>
</html>

三、总结

1、ref不能重名，重名后面会覆盖掉前面的

2、ref绑定到标签上，$refs.xxx获取到的是Dom对象

3、ref绑定到子组件上，获取到的是子组件实例对象

4、$nextTick([callback])是下一次dom对象更新后执行里面的回调函数

以上是关于13-Vue特殊属性-ref的主要内容，如果未能解决你的问题，请参考以下文章