<!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的更多相关文章

  1. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  2. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  3. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

  4. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  5. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  6. vue 子组件和父组件

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.添加子组件 1.父组件修改 <template> <!-- v-for 表情表示循环输出数据 ...

  7. vue2.0:子组件调用父组件

    main.js文件添加如下: new Vue({ router, render: h => h(App), data: { eventHub: new Vue() }}).$mount('#ap ...

  8. Vue 子组件传父组件

    vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用th ...

  9. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. 快速幂取模(POJ 1995)

    http://poj.org/problem?id=1995 以这道题来分析一下快速幂取模 a^b%c(这就是著名的RSA公钥的加密方法),当a,b很大时,直接求解这个问题不太可能 利用公式a*b%c ...

  2. libevent学习笔记 —— 第一个程序：计时器

    用libevent写个定时器其实步骤不多: 1.初始化libevent 2.设置事件 3.添加事件 4.进入循环 由于定时事件触发之后,默认自动删除,所以如果要一直计时,则要在回调函数中重新添加定时事 ...

  3. sql:Mysql create view,function,procedure

    create database Liber; use Liber; #顯示數据庫 20150210 Geovin Du 涂聚文 SHOW DATABASES; drop table BookKindL ...

  4. git杂记-远程仓库的使用

    查看远程仓库:克隆自己的仓库,如不命名则默认远程仓库名字为origin: $ git clone https://github.com/OuFeng/JF_WEB.git Cloning into ' ...

  5. sublime3下载安装及常用插件、浏览器预览设置

    之前与学习前端有关的软件都安装在了实验室电脑上,最近由于要放寒假(也许我寒假回去会学习呢),于是得在笔记本电脑上重新安装一遍.几个软件各种出错,花了一下午才安装好,必须记录下来啊! 这篇文章主要介绍s ...

  6. Angular入门教程一

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  7. Python FFT (Fast Fourier Transform)

    np.fft.fft import matplotlib.pyplot as plt import plotly.plotly as py import numpy as np # Learn abo ...

  8. 基于Apache Curator框架的ZooKeeper使用详解

    一 简介 Apache Curator是一个比较完善的ZooKeeper客户端框架,通过封装的一套高级API 简化了ZooKeeper的操作.通过查看官方文档,可以发现Curator主要解决了三类问题 ...

  9. JAVA中获取文件的大小和文件的扩展名

    一.获取文件扩展名(该段代码来自博客园网站装男人的博客https://www.cnblogs.com/nanrenzhuang/archive/2013/05/19/6315546.html) pub ...

  10. 路飞学城知识点3缓存知识点之一Djang自带的缓存

    缓存是暂时把数据放到哪儿的意思,用于提高查询的访问速度用的,mysql等关系型数据库通常用作备份,数据库进行增删改操作一段时间内存同步到缓存(非关系型数据库中) 缓存与内存的区别: 通常把数据放到内存 ...