zoukankan      html  css  js  c++  java
  • 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

    一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱。
  • 相关阅读:
    CentOS 7 安装 Nginx (LNMP环境搭建第一步)
    JS去除字符串最后的逗号
    mkdir如何创建多级目录
    php实现获取数组中相同/不相同的元素
    git 查看远程仓库地址
    windows git pull或者push或者clone代码时弹出安全框解决办法
    【laravel】api路由无法访问
    PHP开发api接口安全验证
    PHP根据身份证号码,获取性别、获取生日、计算年龄等多个信息
    PHP按一定比例压缩图片
  • 原文地址:https://www.cnblogs.com/antao/p/12986557.html
Copyright © 2011-2022 走看看