运行用VUE中的组件通信，实现简单购物车加购，求其总数

运行用VUE中的组件通信，实现简单购物车加购，求其总数

组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味这不同组件之间的数据无法直接相互引用。
我们可以使用组件之间的通信来实现其功能
首先先从cdn中引入我们所需要的依赖

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

这里附上HTML代码 test子组件必须要在根组件之内，我们复制三个来代替购物车的物品。

 <div id='app'>
         总数：{{num}}
         <test @max1='max1' @min1='min1'></test>
         <test @max1='max1' @min1='min1'></test>
         <test @max1='max1' @min1='min1'></test>
    </div>

我们来设置一个子组件和一个根组件，test是子组件，我们用根组件中的components属性来接收。
子组件test的data中右count变量来计算单个模块的值,我们在子组件的模版内，设置两个按钮，来进行增减减少的操作，当点击增加时我们通过max方法使其执行count++的操作，减少同理。这样我们就拿到了单个物品的值得算法。
我们如果想让子组件传值给父组件，需要用到this.$emit()方法传值给父组件，我们需要点击max1（min1）的方法，让父组件接收到信息，从而让父组件调用方法，进行总数num的累加（减少）

 let test = {
               template:`
                 <div>
                     数量：{{count}}
                     <button @click='max' @click='max1'>增加</button>
                     <button @click='min' @click='min1'>减少</button>
                 </div>
               `,data(){
               //子组件data必须使用方法形式
                   return {
                       count:0
                   }
               },
               methods:{
                   max(){
                       this.count++ 
                   },
                   min(){
                       this.count--
                   },
                   max1(){
                       this.$emit('max1')
                   },
                    min1(){
                       this.$emit('min1')
                   }
               }
           }
           new Vue({
               el:'#app',
               components:{
                   test
               },
               data:{
                   num:0
               },methods:{
                   max1(){
                       this.num++
                   },
                   min1(){
                       this.num--
                   }
               }

           })
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20201125162343756.png#pic_center)