vue子传父
2019-06-02 本文已影响0人
coffee1949
$emit向上提交事件
使用$emit调用父组件的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 第二步，父组件把数据传递给子组件 -->
<hdcms :lists='goods' @total='totalPrice'></hdcms>
总价：{{total}}
</div>
<script type="text/x-template" id="hdcms">
<table>
<tr>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
</tr>
<!-- 第四步，子组件渲染数据 -->
<tr v-for="(v,k) in lists">
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td><input type="number" v-model='v.num' @input='reloadTotal'></td>
<!-- 第五步监听数据变化 -->
</tr>
</table>
</script>
<script type="text/javascript">
var hdcms = {
template: '#hdcms',
// 第三步，子组件接收数据
props: ['lists'],
data(){
return{
}
},
methods: {
reloadTotal(){
// 第六步调用父组件方法重新计算总价
this.$emit('total')
}
}
}
var app = new Vue({
data: {
total: 0,
// 第一步，父组件的数据
goods: [
{
name: '苹果X',
price: 1000,
num: 6
},
{
name: '西瓜',
price: 100,
num: 3
}
]
},
methods: {
totalPrice(){
this.total = 0;
this.goods.forEach((v)=>{
this.total += v.num * v.price;
})
}
},
// 生命周期函数钩子，是一个函数哦哦哦~
mounted(){
this.totalPrice();
},
components: {
hdcms
}
}).$mount('#app')
</script>
</body>
</html>
