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 ...
随机推荐
- nginx详解之语法规则
1.location [=|~|~*|^~] /uri/ { … } location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] ...
- SVN跨版本库迁移目录并保留提交日志
现在有一份代码code在版本库reposA/dirB/下,现在想把它移动到reposB/dirAA/下,本来打算交给SA做,没想到SA似乎 也不太懂的样子.于是,自己在VPS搭建了一个svnserve ...
- Spark集群安装和WordCount编写
一.Spark概述 官网:http://spark.apache.org/ Apache Spark™是用于大规模数据处理的统一分析引擎. 为大数据处理而设计的快速通用的计算引擎. Spark加州大学 ...
- CMDB内功心法，助我登上运维之巅
很多70.80后甚至90后都在金庸.古龙.梁羽生先生等武林大家熏陶下成长的,这么多年过去了,我的武侠梦依然不曾散去.曾几何,梦想有一天练就一身绝学,搂着小师妹花前月下,仗剑走天涯,快意人生.可每次的酣 ...
- EOS主网节点部署
EOS主网节点部署 #环境 ubuntu 16.4 EOS编译安装 EOS主网节点部署 eos区块查询.进程监控shell #EOS编译安装 #环境 ubuntu 16.4 # EOS安装部 # 以下 ...
- dp\dpi\px\pt\em单位长度理解
屏幕都有固定的物理长宽度属性和分辨率 比如电脑.比如手机屏幕 例如有手机屏幕尺寸是1.5英寸x2英寸,屏幕分辨率为240x320, 那么可以推算水平方向每英寸的像素数(dpi)是:240/1.5=16 ...
- Git版本控制工具安装与配置
这里太多,我写在这里方便复制: sudo yum -y install zlib-devel openssl-devel cpio expat-devel gettext-devel curl-dev ...
- 岭回归&Lasso回归
转自:https://blog.csdn.net/dang_boy/article/details/78504258 https://www.cnblogs.com/Belter/p/8536939. ...
- Mysql 数据库系列
阅读目录 第一篇: 数据库初识 第二篇: 库操作 第三篇: 存储引擎 第四篇: 表操作 第五篇: 数据操作 第六篇: 索引原理与慢查询优化 第七篇: 数据备份 pymysql模块 第八篇 ...
- android中代码操作外部SD卡出错：W/System.err(1595): Caused by: libcore.io.ErrnoException: open failed: EACCES (Permission denied)
AndroidManifest.xml 中加上: <uses-permission android:name="android.permission.WRITE_EXTERNAL_ST ...