042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>组件之子组件使用$on与$emit事件触发父组件实现购物车功能</title>
<script src="vue.js"></script>
</head> <body>
<div id="hdcms">
<hd-news :listdata="goods" @sum="total"></hd-news><!--@sum的作用是把父組件的事件綁定到子組件中-->
<h2>总价：{{totalPrice}}</h2>
</div>
<script typeof="text/x-template" id="hdNews">
<table border="2" bordercolor="black" cellspacing="0" cellpadding="20">
<tr>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr v-for="(v,k) in listdata">
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td>
<input type="text" v-model="v.num" @blur="sums"><!--失去焦点之后触发子组件绑定的事件-->
</td>
</tr>
</table>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['listdata'],//继承父组件的数据
methods: {
sums() {
this.$emit('sum');//@emit的作用就是子组件呼叫父组件的事件
}
}
};
new Vue({
el: "#hdcms",
components: {hdNews},
mounted() { //当vue执行完毕之后，去执行函数
this.total();
},
data: {
totalPrice: 0,
goods: [{
name: '苹果X',
price: 200,
num: 1
},
{
name: '华为P10',
price: 100,
num: 1
},
{
name: '小米6',
price: 50,
num: 1
},
]
},
methods: {
total() {
this.totalPrice = 0;
this.goods.forEach((v) => {
this.totalPrice += v.num * v.price;
});
}
}
});
</script> </body> </html>
042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能的更多相关文章
- 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 中 echart 在子组件中只显示一次的问题
问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是 ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数> 1.子组件 <div> <input v-model="l ...
- 子组件通过$emit触发父组件的事件时，参数的传递
子组件.vue <template> <div> <el-table :data="comSchemaData" highlight-current- ...
- vue中子组件触发父组件的方法
网上找了几种方法,下面这两种最实用,最明了 方法一:父组件方法返回是字符串或数组时用这种方法 子组件: <template> <button @click="submit& ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- vue父组件传值和子组件触发父组件方法
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...
- vue 子组件 $emit方法 调用父组件方法
$emit方法 父组件 <template> <div> <child @callFather="activeSon"></child&g ...
随机推荐
- 微软威胁情报中心总经理的十句话——From John Lambert——太精辟了.......
微软威胁情报中心总经理 John Lambert的十句话 1. What is the most ...
- 山寨HTML5API classList类
preface 认为自己去写一些类,你真的会找到自己不足的地方.事实上厉害不是你实现一个类.而是你怎样去设计一个类,能让开发人员更加easy操作. 对于这个操作样式,能够通过javascript訪问s ...
- C#基础笔记(第九天)
1.面向过程<-->面向对象面向过程:面向的是完成这件事儿的过程,强调的是完成这件事儿的动作. 面向对象:找个对象帮你做事儿.意在写出一个通用的代码,屏蔽差异. 每个人都有姓名,性别,身高 ...
- Mysql学习笔记—时间计算、年份差、月份差、天数差（转载）
1.获取当前日期 SELECT NOW(),CURDATE(),CURTIME(); 结果类似: 2. 获取前一天 DAY); 当前日期2018-09-17,结果: 3. 获取后一天 DAY); 当前 ...
- JOJ1202。重新操刀ACM，一天一练！做个简单的题目温习。
http://ac.jobdu.com/problem.php?pid=1202 题目描述: 对输入的n个数进行排序并输出. 输入: 输入的第一行包括一个整数n(1<=n<=100). ...
- cocos代码研究（19）Widget子类ImageView学习笔记
理论基础 显示图片的小控件,继承自 Widget . 代码实践 static ImageView * create()创建一个空的ImageView static ImageView * create ...
- Common Knowledge
2014-08-23 11:01:11 -6:四面体 (1)内切球半径:r = 3V / (S1+S2+S3+S4) (2)体积:将四点组成三个向量AB,AC,AD,向量的混合积就是它们组成的平行六面 ...
- 对Java平台的理解
1) Java是一种面向对象的语言(封装,继承,多态),最显著的特性有两个方面: ----书写一次,到处运行(Write once,run anywhere) 能够非常容易的获得跨平台的能力 --- ...
- 通过Python来操作kylin
起因: 老大要求的数据,无法通过kylin里面的SQL查询到,只能通过调用接口来实现需求 第一步,安装依赖的包(py2/py3都支持,我这边用的是py2) pip install kylinpy pi ...
- python3的一些练习题
下面是最近写的一些python3版本的一些练习题: 1.4+44+444+4444+.....+=? root@wadeson:~/study_for_python/homework# cat aa. ...