Vue里ref ($refs)用法

Posted 2020-12-06 antao

tags:

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

ref 有三种用法：

　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>ref</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="item in list" ref="refContent"> {{item}}</li>
            </ul>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            list: [‘马芸‘, ‘麻花藤‘, ‘王剑琳‘, ‘李佳成‘],
        },
        created: function() {
            this.$nextTick(() => {
                console.log(this); // #app    vue实例
                console.log(this.$refs.refContent); //  <p>标签dom元素 ref在外面的元素上</p>} )
            })
        },
    });
</script>

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时要拿到单个的ref 只需要循环就可以了。

1.ref作用在外面元素上

在学习 jq 时，我们首要任务就是学习选择的使用，因为选择可以极其方便帮助我们获取节点查找dom，因为我们要通过dom展示处理数据。而在Vue中，我们的编程理念发生了变化，变为了数据驱动dom；但有时我们因为某些情况不得不脱离数据操作dom,因此vue为我们提供了 ref 属性获取dom节点；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>ref</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app" v-on:click="consoleRef">
            <p ref="outsideDomRef">ref在外面的元素上</p>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        methods: {
            //用来获取具有ref属性的节点对象
            consoleRef: function() {
                console.log(this); // #app    vue实例
                console.log(this.$refs.outsideDomRef); //  <p>标签dom元素 ref在外面的元素上</p>
            }
        },
    });
</script>

2.ref作用在外面组件上

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>ref</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app" v-on:click="consoleRef">
            <component-father ref="outsideComponentRef"></component-father>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var refoutsidecomponentTem = {
        template: "<div class=‘childComp‘><p>ref在外面的组件上</p></div>"
    };

    var app = new Vue({
        el: "#app",
        components: {
            "component-father": refoutsidecomponentTem
        },
        methods: {
            consoleRef: function() {
                console.log(this); // #app     vue实例
                console.log(this.$refs.outsideComponentRef); // div.childComp vue实例，组件实例
            }
        }
    });
</script>

3.ref使用在里面的元素上--局部注册组件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>ref</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <component-father></component-father>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var refinsidedomTem = {
        template: "<div class=‘childComp‘ v-on:click=‘consoleRef‘>" +
            "<p ref=‘insideDomRef‘>ref在组件里面的元素上，我是子组件</p>" +
            "</div>",
        methods: {
            consoleRef: function() {
                console.log(this); // div.childComp   vue实例 
                console.log(this.$refs.insideDomRef); // <p>ref在组件里面的元素上，我是子组件</p>
            }
        }
    };

    var app = new Vue({
        el: "#app",
        components: {
            "component-father": refinsidedomTem
        }
    });
</script>

4.ref使用在里面的元素上--全局注册组件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>ref</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <ref-inside-dom></ref-inside-dom>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    Vue.component("ref-inside-dom", {
        template: "<div class=‘insideFather‘> " +
            "<input type=‘text‘ ref=‘insideDomRefAll‘ v-on:input=‘showinsideDomRef‘>" +
            "<p>ref在里面的元素上--全局注册 </p> " +
            "</div>",
        methods: {
            showinsideDomRef: function() {
                console.log(this); //这里的this其实还是div.insideFather
                console.log(this.$refs.insideDomRefAll); // <input type="text">
            }
        }
    });

    var app = new Vue({
        el: "#app",
    });
</script>

参考文章：https://www.cnblogs.com/goloving/p/9404099.html

以上是关于Vue里ref ($refs)用法的主要内容，如果未能解决你的问题，请参考以下文章

Vue里ref ($refs)用法

vue中ref（$refs）用法和作用

vue中ref的用法

Vue.js中ref ($refs)用法举例总结及应注意的坑

Vue插槽ref和$refs用法

Vue中$refs的用法