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

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

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

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

注意：

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

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

<div id="ref-outside-component" v-on:click="consoleRef">

    <component-father ref="outsideComponentRef" ></component-father>

    <p>ref在外面的组件上</p>

</div>

    var refoutsidecomponentTem={

        template:"<div class='childComp'><h5>我是子组件</h5></div>"

    };

    var refoutsidecomponent=new Vue({

        el:"#ref-outside-component",

        components:{

            "component-father":refoutsidecomponentTem

        },

        methods:{

            consoleRef:function () {

                consolelog(this); // #ref-outside-component    vue实例

                consolelog(this$refsoutsideComponentRef);  // divchildComp vue实例，组件实例

            }

        }

    });

<div id="ref-outside-dom" v-on:click="consoleRef" >

  <component-father> </component-father>

  <p ref="outsideDomRef" >ref在外面的元素上</p>

</div>

    var refoutsidedomTem={

        template:"<div class='childComp'><h5>我是子组件</h5></div>"

    };

    var refoutsidedom=new Vue({

        el:"#ref-outside-dom",

        components:{

            "component-father":refoutsidedomTem

        },

        methods:{

            consoleRef:function () {

                consolelog(this); // #ref-outside-dom    vue实例

                consolelog(this$refsoutsideDomRef);  //  <p>标签dom元素 ref在外面的元素上</p>

            }

        }

    });

<div id="ref-inside-dom">

    <component-father></component-father>

    <p>ref在里面的元素上</p>

</div>

    var refinsidedomTem={

        template:"<div class='childComp' v-on:click='consoleRef'>" +

                      "<h5 ref='insideDomRef' >我是子组件</h5>" +

                  "</div>",

        methods:{

            consoleRef:function () {

                consolelog(this);  // divchildComp  vue实例

                consolelog(this$refsinsideDomRef);  // <h5 >我是子组件</h5>

            }

        }

    };

    var refinsidedom=new Vue({

        el:"#ref-inside-dom",

        components :{

            "component-father":refinsidedomTem

        }

    });

<div id="ref-inside-dom-all">

    <ref-inside-dom-quanjv></ref-inside-dom-quanjv>

</div>

    Vuecomponent ("ref-inside-dom-quanjv",{

        template:"<div class='insideFather'> " +

                    "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +

                    "  <p>ref在里面的元素上--全局注册 </p> " +

                  "</div>",

        methods:{

            showinsideDomRef:function () {

                consolelog(this); //这里的this其实还是divinsideFather

                consolelog(this$refsinsideDomRefAll); // <input  type="text">

            }

        }

    });

    var refinsidedomall=new Vue({

        el:"#ref-inside-dom-all"

    });

转自:>

ref 主要有两种用法：

1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。

使用的时候用this$refs（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this refs（ref值）方法（） 就可以使用了。

每个组件都有$el属性，用于获取该组件内的html元素，在mounted生命周期中才有效。

vm el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。

则需要先获取该组件 , 再取OffsetTop。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后通过 this el来获取组件中的DOM元素

打印ref="chatContent"的dom元素

this refsbot$el拿到组件内的html元素

van-field被当做组件对待,一直以为它得到是dom元素

el 是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm$el 访问。

挂载阶段还没开始的时候， $el 属性是不可见的。Vue生命周期mounted阶段， el 被新创建的 vm$el 替换,这个时候Vue实例的挂载目标确定， DOM渲染完毕。在这个Vue实例当中，也就可以使用 vm$el 访问到 el 了。具体参考 Vue文档API

el 的作用，用于指明 Vue 实例的挂载目标。

重点关注：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版

参考 >

看Vuejs文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。

HTML 部分

js部分

HTML部分

JS部分

HTML部分

JS部分

HTML部分

JS部分

1、如果通过v-for 遍历想加不同的ref时记得加 : 号，即 :ref =某变量 ;

这点和其他属性一样，如果是固定值就不需要加 : 号，如果是变量记得加 : 号

2、通过 :ref =某变量 添加ref（即加了 : 号） ,如果想获取该ref时需要加 [0] ，如 this$refs[refsArrayItem] [0] ；如果不是 :ref =某变量 的方式而是 ref =某字符串 时则不需要加，如 this$refs[refsArrayItem]

3、想在element ui 对话框打开后取dom时，应该使用 $nextTick ，而不是直接使用 this$refs imgLocal2 ：

在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而 *** 作该dom元素。

以下是个例子：

Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室，同样也能满足3D自由艺术家。

参与项目：

《阿凡达》《2012》《赤壁》《斯巴达克斯》《死不瞑目》《尸城30夜》《功夫熊猫》《异形大战铁血战士》《微光城市》《神奇四侠》《致命拜访》《冒牌天神》《与王一夜》《老友与钱》《加勒比海盗》《ALAUID》《假结婚》《特种部队》《失落的大陆》《终结者》《坠入地狱》《Dragonball Evolution》《女同志吸血鬼杀手》《爱丽丝梦游仙境》《诸神之战》《驯龙记》《狼人》《闰年》《可爱的骨头》《魔法奇幻秀》《美少女特工队》《吉诺密欧与朱丽叶》《纳尼亚传奇》《猫头鹰王国》《歪小子斯科特》《卑鄙的我》《最后的风之子》《怪物史瑞克》《波斯王子》《饥饿游戏》《地心历险记》《雨果》《亚瑟圣诞》《丁丁历险记》《惊天战神》《超级8》《雷神》《大战外星人》《本杰明·巴顿奇事》《马达加斯加》《澳洲乱世情》《空中杀手》《夺宝奇兵》《奇幻精灵事件簿》

在JavaScript中需要通过documentquerySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this$refs即可调用，这样可以减少获取dom节点的消耗。

this$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源

1子组件code：

2父组件code:

以上就是关于vue中ref（$refs）用法和作用全部的内容，包括:vue中ref（$refs）用法和作用、在Vue中使用JSX语法、vm.$refs及$el等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！