42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<hd-news :lists="goods" @sum="total"></hd-news>
总计:{{totalPrice}}元
</div>
<script type="text/x-template" id="hdNews">
<table border="1" width="90%">
<tr>
<th>商品名称</th><th>商品价格</th><th>商品数量</th>
</tr>
<tr v-for="(v,k) in lists">
<td>{{v.title}}</td><td>{{v.price}}</td>
<td>
<!--当input失去焦点时,会呼叫子组件里的sum()方法,sum()方法再通过@sum属性呼叫父组件里的tatal方法,从而再次执行计算-->
<input type="text" v-model="v.num" @blur="sum">
</td>
</tr>
</table>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['lists'],
methods:{
sum(){
this.$emit('sum');
}
}
};
new Vue({
el: '#hdcms',
components: {hdNews},
//页面加载完后,加自动执行total里的方法
mounted(){
this.total();
},
data: {
totalPrice:0,
goods:[
{title:'iphone7Plus',price:100,num:1},
{title:'后盾人会员',price:200,num:1},
]
},
methods:{
total(){
this.totalPrice=0;
this.goods.forEach((v)=>{
this.totalPrice+=v.num*v.price;
})
}
}
});
</script>
</body>
</html>
效果:
42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能的更多相关文章
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 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组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue父组件传值和子组件触发父组件方法
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <scr ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- vue 子组件 $emit方法 调用父组件方法
$emit方法 父组件 <template> <div> <child @callFather="activeSon"></child&g ...
随机推荐
- Python 配置文件加载且自动更新（watchdog）
安装依赖:pip install watchdog #!/usr/bin/env python3 # -*- coding: utf-8 -*- import logging import os im ...
- Asp.NET MVC+WebAPI跨域调用
使用jQuery调用WebApi有时会遇到跨域的问题,今天介绍一种可以简单解决跨域问题的方法. 当我们跨域请求WebAPI的时候会提示以下信息: XMLHttpRequest cannot load ...
- win7,docker安装后，创建虚拟机分配不了ip错误 err: exit status 255
问题 win7装docker真麻烦,不如家里的win10爽.另外明明这是个很简单的操作,但是国内的解决方法有点落后,所以我写了个傻瓜式的. 有兴趣的可以直接看issue https://github. ...
- DNS安全浅议、域名A记录(ANAME)，MX记录，CNAME记录 专题
首先要做的就是配置域名的MX 记录啦: 先添加一条A记录: mail.abc.com 指向 你的服务器IP! 然后添加域名的MX 记录,指向mail.abc.com A 记录( 即域名MX 记录的值为 ...
- 自动布局库--Masonry使用
参考资料(戳这里): > Masonry官网 > Masonry介绍与使用实践(快速上手Autolayout) > iOS 开发实践之 Auto Layout > Ma ...
- 从零开始的全栈工程师——js篇2.10（对象与构造函数）
对象与构造函数 一.js数据类型 基本数据类型:string undefined null boolean number 引用数据类型 Object array function 二 ...
- Catch the moments of your life. Catch them while you're young and quick.
Catch the moments of your life. Catch them while you're young and quick.趁你还年轻利落,把握住生活中的美好瞬间吧!
- unicode字符和多字节字符的相互转换接口
作者:朱金灿 来源:http://blog.csdn.net/clever101 发现开源代码的可利用资源真多,从sqlite3的源码中抠出了几个字符转换接口,稍微改造下了发现还挺好用的.下面是实现代 ...
- Asp.net MVC 服务端验证多语言错误
服务端验证用户提交信息时为了实现多语言使用了资源文件,如: using System.ComponentModel.DataAnnotations; public class UserModel { ...
- HDU3371 Connect the Cities
题目描述: 有n个小岛,其中有的小岛之间没有通路,要修这样一条通路需要花费一定的钱,还有一些小岛之间是有通路的.现在想把所有的岛都连通起来,求最少的花费是多少. 输入: 第一行输入T,代表多少组数据. ...