10-ref|refs

• 总结ref与refs的用法有几点：
  • ref可以绑定同在一个实例上的任何自定义组件和标签。
  • 均可以通过$refs.xx 来访问data和调用其方法。
• html

<div id="app1">
    <button ref="btn" @click="clickBtn">{{msg}}</button>

</div>
<div id="app2">
    <unit-two ref="chilrenUnit"></unit-two>
    <button  @click="cBtn">点我访问兄弟方法且每次+1。</button>
</div>

• js

 // 这是公共组件
    Vue.component('unit-two', {
        template: '<div><span>我被点击{{num}}次</span><button @click="addNum">点我+1</button></div>',
        data: function () {
            return {num: 1}
        },
        methods: {
            addNum: function () {
                this.num++
            }
        }
    });
    var app1=new Vue({
        el:"#app1",
        data:{
            msg:'信息'

        },
        methods:{
            clickBtn(){
                console.log(this.$refs.btn.innerHTML);
            }
        }
    });

    var app2=new Vue({
       el:"#app2",
       methods:{
           cBtn(){
               // 可以直接给子级赋值
               // this.$refs.chilrenUnit.num+=5;
               // 也可以去调用组件里面的方法
               this.$refs.chilrenUnit.addNum();
               console.log(this.$refs.chilrenUnit.num);
           }
       }
    });