<!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. 为什么要学习 UML？

    UML 的首要价值是沟通和理解.好的图形可以帮助沟通设计思想,尤其是要回避许多细节时,图形也可以帮助你理解软件系统或业务流程.作为团队的成员,尝试弄清楚某些东西时,图形有助于理解和沟通整个团队所理解到 ...

  2. hdu 1880 魔咒词典 （字符串哈希）

    魔咒词典 Time Limit: 8000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. java线程的常用方法

    java线程的常用方法 编号 方法 说明 1 public void start() 使该线程开始执行:Java 虚拟机调用该线程的 run 方法. 2 public void run() 如果该线程 ...

  4. js获取昨天/上周/上个月开始和结束的时间戳，可以设置时分秒 js obtain start and end timestamp of yesterday/last week/last month, with set of hour/minute/second

    //obtain timestamp of last week var now=new Date() var nowDayOfWeek = now.getDay(); //今天本周的第几天 var n ...

  5. HTML中的Head标签学习

    在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...

  6. 用Java开发贪吃蛇游戏

    贪吃蛇游戏的设计步骤: Part 1: 设计游戏图纸 画出900*700的白色窗口 在窗口上添加画布 在画布上添加标题 在画布上添加黑色游戏区 Part 2: 放置静态的蛇:一个头.两个身体 加上开始 ...

  7. C++ 线程学习

    原文:http://blog.csdn.net/wzy_1988/article/details/46562921 线程的概念 C++中的线程的Text Segment和Data Segment都是共 ...

  8. A memory map of an object

    Phone类 package com.itheima_02; /* * 手机类: * 成员变量:品牌,价格,颜色... * 成员方法:打电话,发短信... */ public class Phone ...

  9. MySQL 练习题2

    CREATE TABLE `dept` ( `did` ) NOT NULL AUTO_INCREMENT, `dname` ) DEFAULT NULL, `address` ) DEFAULT N ...

  10. 毕向东_Java基础视频教程第19天_IO流（20~22）

    第19天-20-IO流(改变标准输入输出设备) static void setIn(InputStream in) Reassigns the "standard" input s ...