vue ref使用に関する全面的なまとめ

refの役割
refはDOM要素またはサブコンポーネントに参照情報を登録するために使用される.参照情報は、親コンポーネントの$refsオブジェクトに基づいて登録されます.通常のDOM要素で使用される場合、参照情報は要素です.サブコンポーネントで使用する場合、参照情報はコンポーネントインスタンスです.
注意:DOM要素をVueで直接操作するにはref属性で登録する必要があります
DOM要素に参照情報を登録---(参照情報は要素)

  
{{msg}}
  
  
{{msg}}
  
{{a}}

........
    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  ,           

サブコンポーネントに参照情報を登録---(参照情報はコンポーネントインスタンス)
親コンポーネントで使用可能な操作子コンポーネント

    
    

.......
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をこのように使用します.

    haha  
    
    



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