Vue中的ref和$refs

Vue中的ref和$refs

ref  用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例：

例如

在DOM上使用ref
 <div id="root">        
        <div ref="hello" @click="handleClick">调用DOM元素</div>
    </div>
 <script>        
        var vm=new Vue({
            el: "#root",
            methods: {
                handleClick: function(){
                    console.log(this.$refs.hello)
                }
            }
        })
 </script>

结果：引用指向该DOM元素

在自组件上使用ref
<div id="root">        
        <item ref="hello"></item>
    </div>
    <script>
        Vue.component('item',{
            data: function () {
                    return {
                         msg: "hello world"
                    }
            },
            template: '<div @click="handleClick">{
   
   {msg}}</div>',
            methods:{
                handleClick:function () {
                    console.log(vm.$refs.hello)
                }
            }
        })
        var vm=new Vue({
            el: "#root"            
        })
    </script>

 结果：引用指向子组件实例

：

案例：使用vue的ref实现求和。通过ref获得两个子组件的number并求和，将和赋值给父组件的total

<div id="root">       
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{
   
   {total}}</div>
    </div>
    <script>
        Vue.component('counter',{
            data: function () {
                    return {
                         number: 0
                    }
            },
            template: '<div @click="handleClick">{
   
   {number}}</div>',
            methods:{
                handleClick:function () {
                    this.number++;
                    this.$emit("change")
                }
            }
        })
        var vm=new Vue({
            el: "#root",
            data:{
                total:0
            },
            methods: {
                handleChange: function(){
                   this.total=this.$refs.one.number+this.$refs.two.number
                }
            }
        })
    </script>

结果：