这是路由之间的跳转，传递值最好采用传参，而不是用$emit和$on，不起作用
如果实在一个页面中的兄弟组件，可以使用$emit和$on
中间件，eventBus.js 放在components目录下面
图片路径 static/img
模拟数据 /static/data.json
{
"status":1,
"result":{
"totalMoney":59,
"list":[
{
"productId":"60001",
"productName":"HTML5+CSS3全面讲解",
"productPrice":19,
"productQuentity":1,
"productImage":"static/img/img1.jpg",
"parts":[
{
"partsId":"10001",
"partsName":"铅笔"
},
{
"partsId":"10002",
"partsName":"书签"
}
]
},
{
"productId":"60002",
"productName":"Javascrip从入门到精通",
"productPrice":15,
"productQuentity":1,
"productImage":"static/img/img1.jpg",
"parts":[
{
"partsId":"10003",
"partsName":"圆珠笔"
}
]
}
]
},
"message":""
}
product.vue
<template>
<div class="product">
<table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th colspan="2">商品信息</th>
<th style=" 14%;">商品金额</th>
<th style=" 14%;">商品数量</th>
<th style=" 14%;">总金额</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr v-for="item in productList">
<td style=" 5%;"><input type="checkbox" :checked="item.check" @click="checkBox(item)"/></td>
<td class="goods">
<img :src="item.productImage" class="goods-left"/>
<div class="goods-right">
<p>{{item.productName}}</p>
<p class="tip">赠送：<span style="margin-right: 5px;" v-for="part in item.parts" v-text="part.partsName"></span></p>
</div>
</td>
<td>{{item.productPrice | formatMoney}}</td>
<td class="num">
<a href="javascript:;" @click="changeMoney(item,-1)">-</a>
<input type="text" v-model="item.productQuentity" disabled />
<a href="javascript:;" @click="changeMoney(item,1)">+</a>
</td>
<td class="redcolor">{{item.productPrice*item.productQuentity | formatMoney}}</td>
<td class="del" @click="del(item);">删除</td>
</tr>
</tbody>
<tfoot>
<tr class="footer">
<td><input type="checkbox" :checked="checkAllFlag" @click="checkAll"/></td>
<td>
<span class="redcolor">全选</span>
</td>
<td colspan="4">
总计：<span>{{totalMoney | formatMoney}}</span>元
<button type="button" class="btn" @click="ToPayTotalMoney()">结账</button>
</td>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
import axios from "axios";
import bus from './eventBus.js'
export default {
data() {
return {
productList: [],
checkAllFlag: false,
totalMoney: 0
};
},
mounted() {
this.getJson();
},
created(){
bus.$emit("hello","hello")
},
filters: {
//人民币单位，保留两位小数点
formatMoney: function(value) {
return "￥ " + value.toFixed(2);
}
},
methods: {
getJson: function() {
var that = this;
this.$http.get("/static/cartData.json").then(function(res) {
var res = res.data.result.list;
//console.log(res)
that.productList = res;
// console.log(that.proLists)
});
},
//单选
checkBox: function(item) {
var _this = this;
var num = 0;
if (typeof item.check == "undefined") {
this.$set(item, "check", true);
} else {
item.check = !item.check;
}
this.productList.forEach(function(item, value) {
if (item.check) {
num++;
}
});
if (num == _this.productList.length) {
this.checkAllFlag = true;
} else {
this.checkAllFlag = false;
}
this.getTotalMoney();
},
//全选
checkAll: function() {
var _this = this;
console.log(_this);
this.checkAllFlag = !this.checkAllFlag;
this.productList.forEach(function(item, index) {
if (typeof item.check == "undefined") {
_this.$set(item, "check", _this.checkAllFlag);
} else {
item.check = _this.checkAllFlag;
}
});
this.getTotalMoney();
},
//增减数量
changeMoney: function(product, way) {
if (way > 0) {
product.productQuentity++;
} else {
product.productQuentity--;
if (product.productQuentity < 1) {
product.productQuentity = 1;
}
}
this.getTotalMoney();
},
//计算总价
getTotalMoney: function() {
var _this = this;
this.totalMoney = 0;
this.productList.forEach(function(item, index) {
if (item.check) {
_this.totalMoney += item.productQuentity * item.productPrice;
}
});
},
del: function(item) {
var index = this.productList.indexOf(item);
this.productList.splice(index, 1);
this.getTotalMoney;
},
ToPayTotalMoney(){
//localStorage.setItem('totalMoney',this.totalMoney)
console.log(this.totalMoney)
bus.$emit("getTotalMoney",this.totalMoney);
this.$router.push({path:"/pay"，
params:{
payTotalMoney:this.totalMoney
}
})
},
}
};
</script>
<style lang="scss">
</style>
pay.vue跳转页面，显示总价格
<template>
<div class="paycontent">
您需要支付<span>{{payMoney}}元</span>
</div>
</template>
<script>
import bus from "./eventBus.js";
import a from "@/components/a.vue"
import b from "@/components/b.vue"
export default {
data() {
return {
payMoney: 0,
msg:"hi"
};
},
mounted() {
var _this=this;
var val=this.$route.params.payTotalMoney;
if(val){
_this.payMoney=val;
}
}
};
</script>