vue 子组件传父组件 实现功能

 <script src="../vue.js"></script>
    <script>
        window.onload = function(){
            //父组件
            const app = new Vue({
                el:"#order",
                data:{
                    total:0
                },
                methods:{
                    myCount(count){
                        this.total = count
                    }
                },
                //子组件
                components:{
                    cpn1:{
                        template:"#cpn",
                        data(){
                            return {
                                count:0
                            }
                        },
                        methods:{
                            increment(){
                                this.count++
                                //自定义组件，传给父组件
                                this.$emit("childcount1",this.count)
                            },
                            decrement(){
                                this.count--
                                this.$emit("childcount2",this.count)
                            }
                        }
                    }
                }
            })
        }
    </script>

 <div id="order">
        <cpn1 @childcount1 = "myCount" @childcount2 = "myCount"></cpn1>
        <h2>点击次数:{{total}}</h2>
    </div>
    <template id="cpn">
        <div>
            <button @click = "increment">+</button>
            <button @click = "decrement">-</button>
        </div>
    </template>