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 ...
随机推荐
- C++ new 长度为0的数组
在C++中可以new一个长度为0的数组,通过下面的语句: char* p = new char[0]; 指针p中保存一个非NULL的地址,但是你不能够对p指向的内存进行写入,因为p的内存长度为0, 该 ...
- Flask简介之简单应用
Flask 0.Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收ht ...
- Select触发事件
案例1: <script type="text/JavaScript"> function gradeChange(){ var objS = document.ge ...
- mysql++使用
Mysql++是官方发布的.一个为MySQL设计的C++语言的API.Mysql++为Mysql的C-Api的再次封装,它用STL(Standard Template Language)开发并编写,并 ...
- java基础语法this关键字
未经允许,禁止转载!!!!!!!! this关键词在java里面很重要,想了解清楚this就必须对 类:对象:this:成员变量:方法:构造方法 都了解清楚. 一.使用this调用本类中的成员变量( ...
- sprintf函数的用法
说明1:该函数包含在stdio.h的头文件中,使用时需要加入:#include <stdio.h> 说明2:sprintf与printf函数的区别:二者功能相似,但是sprintf函数打印 ...
- MySQL中特有的函数CONV函数
CONV函数:用于对数字进行转换,比如将十进制的数字转化成二进制,参数格式convert(N,frombse,tobase) 将数字N从frombase进制转化成tobase进制,并且以字符串的格式返 ...
- 2016-ccf-data-mining-competition 搜狗用户画像构建
想法1: 分成147(3*7*7)类, 后来觉得这样效果不好,后来看了看竞赛要求的也是分别预测,分别评分,而不是一次就把3类的标签都给出 所有后来我们改进了当时的想法,决定对年龄,性别,学历进 ...
- MFC中Doc类获取View类的方法（SDI）
从view类中获取Doc的方法如下: CYourDoc* pDoc = GetDocument(); 这个函数已经写好,所以无需自己添加,使用时直接利用pDoc即可. 若反过来,从Doc中获取View ...
- 聊一聊PV和并发、以及计算web服务器的数量的方法(转)
转自:http://www.chinaz.com/web/2016/0817/567752.shtml 最近和几个朋友,聊到并发和服务器的压力问题.很多朋友,不知道该怎么去计算并发?部署多少台服务器才 ...