5.vue组件间的数值传递（兄弟）

点击购物车（goodsshows）改变底部购物（App）车徽章数字

• 核心内容

goodsshows和App没有父子和跳转关系，怎么传递数值呢
1.定义一个sendparams.js
// 负责产生一个vm对象并且导出
import Vue from 'vue';
export var vm = new Vue();
export const KEY = 'sendparmas'
2.实现方法
保证goodsshow.vue中的调用 vm.$emit()的对象vm要和App.vue中的vm是同一个
 - 在goodsshow.vue中发送数据：vm.$emit(key,value)
import {vm,KEY} from '../../kits/sendparams.js'
vm.$emit("send",1)
 - 在App.vue中 vm.$on(key) 这样才能给实现跨组件传值
import {vm,KEY} from '../../kits/sendparams.js'
vm.$on("send",function(input){
  alert(input)----1
})

• goodsshow.vue

// 3.0 加入购物车方法
            addShopCar(){
                // 1.0 获取商品id和选择的数量
                var  goodsid = this.goodsid;
                var selectedCount = this.count;

                // 2.0 将数据包装成要求的格式{goodsid:goodsid,count:selectedCount} 存储到localStorage中
                setItem({goodsid:goodsid,count:selectedCount});

                // 3.0 讲当前数据的数量发送给所有的注册者
                vm.$emit(KEY,selectedCount);

                // 4.0 显示小球
                this.isshow =!this.isshow;
            }

• App.vue

      这里通过js代码来实现
    var count = 0;
    import {vm,KEY} from './kits/sendparams.js';

    vm.$on(KEY,function(input){
        // 将input数据叠加到count 
        count+=input;

        // 将count设置到span中
        document.getElementById('badge').innerText=count;
    });