前言

今天来做一个小练习。使用vue实现一个动态加载的计算总和。
效果图如下：

当点击前两个 数字的时候，两个数会加一，并把值赋给第三个值。

主要代码

1. 首先定义一个全局组件count。

    Vue.component("count",{
        template:"<div @click='handClick'>{{number}}</div>",
        data:function(){
            return {
                number:0
            }
        },
        methods:{
            handClick:function(){
                // alert("dian")
                this.number++;
                // 子组件往父组件传值 
                this.$emit("change")
            }
        }
    })

定义一个模板，里面有一个点击事件handClick，同时定义一个data，把number赋值0，最后子组件向父组件传递一个change。

2.父组件接收change 。

 <count @change="handleChange" ref="one"></count>
        +
        <count @change="handleChange" ref="two"></count>
        =
        <!-- 这个可不是count啊 -->
        <div >{{total}}</div>

ref代表接收子组件中的数据。

3. 实现方法,把总数相加。

var vm = new Vue({
        el:"#root",
        data:{
            total:0

        },

        methods:{
            handleChange:function(){
                this.total = this.$refs.one.number+this.$refs.two.number
            }
        }
    })