vue中ref的用法

Posted 2023-03-24

参考技术A

vue给我们提供一个操作dom的属性， ref 。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:

看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:

可以看到如果绑定在普通的dom元素上，与id用法基本一样，那肯定还有别的用法，比如 循环渲染 :

可以看到是个数组，也很好理解，数组的每一项就是每个li元素。

然后我把别的地方引用它，并绑定ref:

可以看到这次和我们之前绑定在dom元素上有很大的不同，这次获取到的是一个VueComponent对象，里面有这个组件的各个属性，这些属性里面有一个$el，这就是dom对象，就是和我们直接绑定在dom元素上获取的一样:

这个$el属性，而且我们可以看到里面还有我们设置在data里面的变量，我们是可以直接通过这种ref的方式去修改，它就等于拿到那个组件的this，可以直接调用，不仅是data里面的变量，还有methods里面的方法:

这种用法特别适合在用ui框架的组件的时候，ui框架给我们提供了很多组件的方法，就是要通过这个ref去调用,比如说element-ui的树形组件:

还有许多，用到外部框架组件的时候，就需要使用这种方法。

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

参考技术A 1、ref 加在普通元素上，用this.$refs.name 获取到的是dom元素

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

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 ()

                console.log(this); // #ref-outside-component    vue实例

                console.log(this.$refs.outsideComponentRef);  // div.childComp 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 ()

                console.log(this); // #ref-outside-dom    vue实例

                console.log(this.$refs.outsideDomRef);  //  <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 ()

                console.log(this);  // div.childComp  vue实例

                console.log(this.$refs.insideDomRef);  // <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>

    Vue.component ("ref-inside-dom-quanjv",

        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 refinsidedomall=new Vue(

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

    );

转自:https://www.cnblogs.com/goloving/p/9404099.html