vue中ref怎么用

vue中ref的用法有三种，分别是：1.ref加在普通的元素上，用this.ref.name获取dom元素；2.ref加在子组件上，用this.ref.name 获取组件实例，可以使用组件的所有方法；3.利用v-for和ref获取一组数组或者dom节点。

示例：

1.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实例，组件实例
            }
        }
    });

2.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在外面的元素上
            }
        }
    });

3.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
        }
    });

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

//ref在里面的元素上--全局注册
    
    Vue.component("ref-inside-dom-quanjv",{
        template:"
 " +
                    "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
                    "  
ref在里面的元素上--全局注册 
 " +
                  "
",
        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"
    });