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
})
// 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;
}
这里通过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;
});
