vue2里面ref的使用

1、我们先定义两个组件

html部分
      

            
            
        

js部分
      Vue.component('navbar',{
                template:'
{{navs}}
',
                data:function () {
                    return {
                        navs:1
                    }
                }
            });
        Vue.component('pagefooter',{
                template:'
{{footer}}
',
                data:function () {
                    return {
                        footer:11
                    }
                }
            });

这里怎么直接访问navbar的navs和pagefooter的footer值呢？这就用到ref了

2、ref的使用

修改组件

          new Vue({
                el:'#app',
                created:function(){
                    
                },
                mounted:function () {
                    this.$refs.navbar.navs=222
                    //ready,
                    //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
                     console.log(this.$refs.navbar.navs);
                     console.log(this.$refs.pagefooter.footer);
                }
            })

如果仅仅用到一个普通标签上

他的作用和：

document.querySelector('[ref=demo]');

的作用一样