vue里ref ($refs)用法

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

ref 有三种用法：

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

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

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

　　注意：

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

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

一、ref使用在外面的组件上       

ref在外面的组件上

   

   

   

ref在外面的组件上

    var refoutsidecomponentTem={

        template:"

我是子组件

"

    };

    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实例，组件实例

            }

        }

    });

二、ref作用在外面元素上

//ref在外面的元素上

 

 

 

ref在外面的元素上

    var refoutsidedomTem={

        template:"

我是子组件

"

    };

    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);  // 

标签dom元素 ref在外面的元素上

            }

        }

    });

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

//ref在里面的元素上

   

   

   

ref在里面的元素上

    var refinsidedomTem={

        template:"

" +

                      "

我是子组件

" +

                  "

",

        methods:{

            consoleRef:function () {

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

                console.log(this.$refs.insideDomRef);  //

我是子组件

            }

        }

    };

    var refinsidedom=new Vue({

        el:"#ref-inside-dom",

        components:{

            "component-father":refinsidedomTem

        }

    });

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

//ref在里面的元素上--全局注册

   

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

        template:"

" +

                    "" +

                    " 

ref在里面的元素上--全局注册

" +

                  "

",

        methods:{

            showinsideDomRef:function () {

                console.log(this); //这里的this其实还是div.insideFather

                console.log(this.$refs.insideDomRefAll); //

            }

        }

    });

    var refinsidedomall=new Vue({

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

    });