vue2里面ref的使用

1、我们先定义两个组件

html部分
      <div id="app">
            <navbar ></navbar>
            <pagefooter ></pagefooter>
        </div>

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

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

2、ref的使用

修改组件

      <div id="app">
            <navbar ref="navbar"></navbar>
            <pagefooter ref="pagefooter"></pagefooter>
        </div>

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

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

<div ref="demo"></div>

他的作用和：

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

的作用一样