vue关于 ref 使用的全面总结

ref的作用

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例

注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

给DOM元素注册引用信息---(引用信息就是元素)

<div id='example'>
  <p ref='mydom'>{{msg}}</p>  
  <p ref='mydom'>{{msg}}</p>
  <div ref='mydiv' v-for="a in arr">{{a}}</div >
</div>
........
    let data={msg:1,arr:[1,2,3]}
    let vm=new Vue({
        el:'#example',
        data:data,
        mounted(){//写在mounted中才能拿到真实dom，或者写在nextTick回调函数中
          //如果dom元素不是通过v-for循环出来的，只能获取一个，通过-for循环出来的可以获取多个
          console.log(this.$refs.mydom)//只能获取一个p
          console.log(this.$refs.mydiv)//通过循环可以获取多个div
        }
    })
   
 // vm.$refs   ---//关联ref属性的DOM元素,可以操作这个关联的元素

给子组件注册引用信息---(引用信息就是组件实例 ）

可用于父组件尽情的操作子组件

<div id="app">
    <navbar></navbar>
    <pagefooter></pagefooter>
</div>
.......
Vue.component('navbar',{
    template:'#navbar',
    data:function () {
        return {
            navs:[]
        }
    }
});
Vue.component('pagefooter',{
    template:'#pagefooter',
    data:function () {
        return {
            footer:''
        }
    }
});

new Vue({
    el:'#app',
    mounted:function () {
        //这里怎么直接访问navbar的navs和pagefooter的footer值呢，执行子组件的函数。。。。。
        //ready,操作子组件实例即可
    }
})

接下来应该这样使用ref:

<div id="app">
    <button @click="hide()">haha消失</button>
    <navbar ref="navbar"></navbar>
    <pagefooter ref="pagefooter"></pagefooter>
</div>
<template id='navbar'>
    <div v-show='flag'> haha </div>
</template>
<template id='pagefooter'>
    <div>lala </div>
</template>
.......
Vue.component('navbar',{
        template:'#navbar',
        data:function () {
            return {
                navs:[1,2,3],
                flag:true
            }
        },
        methods:{
            hide(){
                this.flag=false;
            }
    }
    });
    Vue.component('pagefooter',{
        template:'#pagefooter',
        data:function () {
            return {
                footer:'footer'
            }
        }
    });
    new Vue({
        el:'#app',
        mounted:function () {
            console.log(this.$refs.navbar.navs);//拿到navbar组件的navs
            console.log(this.$refs.pagefooter.footer);//拿到pagefooter组件的footer
            this.$refs.pagefooter.$el.style.fontSize='100px'//修改子组件的样式
        },
        methods:{
            hide(){
                this.$refs.navbar.hide();//执行子组件上的方法
            }
        }
    })