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 ...
随机推荐
- Database Sharding, The “Shared-Nothing” Approach DATABASE SHARDING
w将单个服务器上的单个数据库打碎为多个服务器上的单个数据库 http://www.agildata.com/database-sharding/ Database Sharding provides ...
- SQL基础--查询之三--嵌套查询
SQL基础--查询之三--嵌套查询
- receive.denyCurrentBranch 推送错误解决
场景: 1.搭建Ok了一git服务器 2.本机上的现有源码,现在想纳入git源码管理 操作: 1.服务器上创建了工程仓库 git init 2. 客户端使用tortoisegit添加并提交要纳入源码管 ...
- Keras-在预训练好网络模型上进行fine-tune
在深度学习的学习过程中,可能会用到一些已经训练好的模型,比如Alex Net,google Net,VGG,Resnet等,那我们怎样对这些训练好的模型进行fine-tune来提高准确率呢? 参考文章 ...
- [LeetCode] 83. Remove Duplicates from Sorted List_Easy tag: Linked List
Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...
- Cocos2d-JS实现的打飞机
一.前言 今天我们来讲一个最最最常见的一个小游戏--打飞机!是的,打飞机!还记得小时候在玩儿的雷电,应该是打飞机最早的样子了吧.直到现在,也有微信打飞机,全民飞机大战,全民打飞机等游戏的出现,这些游戏 ...
- Know that more adidas NMD Singapore colorways are coming
The adidas NMD Singapore continues to be the right silhouette for summer time because of a mix of a ...
- js判断浏览器的类型和获得浏览器的版本
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- （3）在Windows7上搭建Cocos2d-x
工具准备 搭建开发环境需要安装工具包括 Visual Studio python ———(本教程以python2.7.3版本为例),下载地址:http://www.python.org/downloa ...
- C# 使用 wkhtmltopdf 把HTML文本或文件转换为PDF
一.简介 之前也记录过一篇关于把 HTML 文本或 HTML 文件转换为 PDF 的博客,只是之前那种方法有些局限性. 后来又了解到 wkhtmltopdf.exe 这个工具,这个工具比起之前的那种方 ...