goodsshows和App沒有父子和跳轉(zhuǎn)關(guān)系，怎么傳遞數(shù)值呢
1.定義一個sendparams.js
// 負(fù)責(zé)產(chǎn)生一個vm對象并且導(dǎo)出
import Vue from 'vue';
export var vm = new Vue();
export const KEY = 'sendparmas'
2.實現(xiàn)方法
保證goodsshow.vue中的調(diào)用 vm.$emit()的對象vm要和App.vue中的vm是同一個
- 在goodsshow.vue中發(fā)送數(shù)據(jù)：vm.$emit(key,value)
import {vm,KEY} from '../../kits/sendparams.js'
vm.$emit("send",1)
- 在App.vue中 vm.$on(key) 這樣才能給實現(xiàn)跨組件傳值
import {vm,KEY} from '../../kits/sendparams.js'
vm.$on("send",function(input){
alert(input)----1
})
// 3.0 加入購物車方法
addShopCar(){
// 1.0 獲取商品id和選擇的數(shù)量
var goodsid = this.goodsid;
var selectedCount = this.count;
// 2.0 將數(shù)據(jù)包裝成要求的格式{goodsid:goodsid,count:selectedCount} 存儲到localStorage中
setItem({goodsid:goodsid,count:selectedCount});
// 3.0 講當(dāng)前數(shù)據(jù)的數(shù)量發(fā)送給所有的注冊者
vm.$emit(KEY,selectedCount);
// 4.0 顯示小球
this.isshow =!this.isshow;
}
這里通過js代碼來實現(xiàn)
var count = 0;
import {vm,KEY} from './kits/sendparams.js';
vm.$on(KEY,function(input){
// 將input數(shù)據(jù)疊加到count
count+=input;
// 將count設(shè)置到span中
document.getElementById('badge').innerText=count;
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
