<!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. 【SSH网上商城项目实战21】从Demo中看易宝支付的流程

         转自: https://blog.csdn.net/eson_15/article/details/51447492 这一节我们先写一个简单点的Demo来测试易宝支付的流程,熟悉这个流程后, ...

  2. Js实现简单的音频播放

    现效果如下: 由于我这边不需要其他按钮,就没写 数据是由后台提供,在这做了个小列子 后台代码 ) { MusicPlayerModel model = new MusicPlayerModel(); ...

  3. mustache 模板，用于构造html页面内容

    Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...

  4. GetModuleFileName和获取应用程序当前目录

    原文:http://www.cnblogs.com/xuemaxiongfeng/articles/2465544.html API函数GetModuleFileName():获得应用程序目录相对路径 ...

  5. 理解android中ListFragment和Loader

    一直以来不知Android中Loader怎么用,今天晚上特意花了时间来研究,算是基本上搞明白了,现在把相关的注释和代码发出来,以便笔记和给网友一个参考,错误之处还望大家给我留言,共同进步,这个例子采用 ...

  6. axure rp8.1 注册码

    授权人:University of Science and Technology of China (CLASSROOM)授权密钥:DTXRAnPn1P65Rt0xB4eTQ+4bF5IUF0gu0X ...

  7. 第一个JavaScript代码

    既然我们的CSS就必须要要放再专门的style标签内  那么javascript也需要放在子级的标签内,那就是script标签内 在页面中,我们可以在body标签中放入<script type= ...

  8. iOS设计模式 - 桥接

    iOS设计模式 - 桥接 示意图 说明 1. 桥接模式为把抽象层次结构从实现中分离出来,使其可以独立变更,抽象层定义了供客户端使用的上层抽象接口,实现层次结构定义了供抽象层次使用的底层接口,实现类的引 ...

  9. 绘制虚线的UIView

    绘制虚线的UIView CAShapeLayer配合贝塞尔曲线可以绘制曲线,笔者继承了一个UIView的子类,并将该子类的backedLayer替换为CAShapeLayer,以此来实现绘制虚线的效果 ...

  10. My personal website:http://47.94.240.229:8080/yjh/project/

    My personal website:  http://47.94.240.229:8080/yjh/project/