父子组件的数据传递1：子组件给父组件传值，事件绑定

利用“ref引用”获取DOM节点（vue中很少操作，基本都是绑定事件）this.$ref.ref的值

1、自组件点击数字+1

2、父组件中total=两个自组缉拿count的和——>发布订阅 this.$emit("change")——子组件改变，向外触发change时间

子组件通过事件触发的方式向父组件传数据

<script>
//根组件
    <div id="root">
        //ref获取DOM节点 父组件在这监听子组件传来的事件
       <counter red="one" @change="handleChange"></counter>   //子组件
       <counter red="two" @change="handleChange"></counter> 
       <div>{{tatal}}</div>
    </div>
</script>
<script>
//全局注册子组件，可直接在div中引入;局部注册子组件，要在根组件中声明
Vue.component("counter",{
    template:'<div @click=handleClick>{{number}}</div>',
    data:function(){  //注意：data必须写成函数返回的形式
        return {
            number:0
        }
    },
    methods:{
        handleClick:function(){
            this.number++
            this.$emit('change') //被点击时触发，子组件在这给父组件传数据
            //逻辑：被点击时，子组件发现自身div被点击，触发handleClick事件，向外触发change
        }
    }
})
//根组件
var vm=bew Vue({
    el:'#root',
    data:{
        total:0
    },
    methods:{
        handleChange:function(){
            this.total=this.$refs.one.number+this.$refs.two.number
        }
    }
})
</script>