Vue 子组件调用父组件 $emit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 子组件调用父组件 $emit</title>
</head>
<body>
<div id="app">
<table border="2">
<tr v-for="(item,index) in items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<dsj-numbox v-bind:count="item.count" v-on:genxin="handleUpdate" :index="index"></dsj-numbox>
</td>
</tr>
</table>
<p>总计{{totalCount}} 件商品</p>
</div>
<script src="vue.js"></script>
<!-- //测试数据 -->
<script>
var goods = [
{
id: 1001,
name: "百事可乐",
count: 3
},
{
id: 1002,
name: "红牛",
count: 12
},
{
id: 1003,
name: "乐吧 ",
count: 31
},
{
id: 1004,
name: "乐虎",
count: 2
},
{
id: 1005,
name: "百岁山",
count: 3
}
]
</script>
<template id="template-numbox">
<div>
<button type="button" @click="jian(index)">-</button>
<input type="text" size="2" v-bind:value="count" />
<button type="button" @click="jia(index)">+</button>
</div>
</template>
<!-- 创建组件数字框 -->
<script>
Vue.component("dsj-numbox", {
props: ["index", "count"],
template: "#template-numbox",
methods: {
jia: function(index) {
//emit:调用的是事件,不是方法
//1、父组件可以使用 props 把数据传给子组件。
//2、子组件可以使用 $emit 触发父组件的自定义事件。
this.$emit("genxin", this.index, this.count + 1);
},
jian: function(index) {
this.$emit("genxin", this, index, this.count - 1);
}
}
});
var app = new Vue({
el: "#app",
data: {
items: goods
},
methods: {
//将指定商品数量
handleUpdate: function(index, count) {
this.items[index].count = count;
}
},
computed: {
totalCount: function() {
var sum = 0;
for (var i = 0; i < this.items.length; i++) {
sum += this.items[i].count;
}
return sum;
}
}
})
</script>
</body>
</html>
Vue 子组件调用父组件 $emit的更多相关文章
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
- vue 子组件和父组件
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.添加子组件 1.父组件修改 <template> <!-- v-for 表情表示循环输出数据 ...
- vue2.0:子组件调用父组件
main.js文件添加如下: new Vue({ router, render: h => h(App), data: { eventHub: new Vue() }}).$mount('#ap ...
- Vue 子组件传父组件
vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用th ...
- Vue中子组件调用父组件的方法
Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- uwsgi/uWSGI/WSGI简介
参考文章 uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换.z WSGI是一种Web服务器网 ...
- 文件上传(Servlet/Struts2/SpringMVC)
文件下载(Servlet/Struts2)的链接:http://www.cnblogs.com/ghq120/p/8328093.html 文件上传 Servlet实现 要实现文件上传的功能,必须在f ...
- DBUtils结果集处理器介绍
common-dbutils.jar是Apache组织提供的一个对JDBC进行简单封装的开源工具类库,使用它能够简化JDBC应用程序的开发,同时也不会影响程序的性能. 1.QueryRunner类 ① ...
- 从BASE理论到CAP理论
BASE理论面向的是大型高可用可扩展的分布式系统,和传统事务的CID特性是相反的,它完全不同于ACID的强一致性模型,而是提出通过牺牲强一致性来获得可用性,并允许数据在一段时间内是不一致的,但最终达到 ...
- csharp:FlowLayoutPanel
/// <summary> /// 集合添加的控件 /// 涂聚文20150339 /// </summary> public void AddNewTextBox() { P ...
- 新版qq canvas 动态背景
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring Tech
1.Spring中AOP的应用场景.Aop原理.好处? 答:AOP--Aspect Oriented Programming面向切面编程:用来封装横切关注点,具体可以在下面的场景中使用: Authen ...
- PHP array_flip() array_merge() array+array的使用总结
array_flip(array); //传递一个数组参数,对该数组的键.值进行翻转 例如: $a = array( 'a', 'b', 'c' ); print_r(array_flip($a)); ...
- 个人总结-9-session的使用,十天免登陆
昨天查看bootstrap,实现了登录和注册页面的重写. 今天准备加入session实现,十天免登陆等内容. 使用bootstrap直接套用标签页,以实现.
- 2.java相对路径与绝对路径
1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz/test.txt 代表了test.txt文件的绝对路径.http://www. ...