<!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. Java包装类、拆箱和装箱详解

    转载:https://www.cnblogs.com/ok932343846/p/6749488.html 虽然 Java 语言是典型的面向对象编程语言,但其中的八种基本数据类型并不支持面向对象编程, ...

  2. 记录一次teamview无法远程连接对方teamview的过程

    问题描述: teamviewer 提示 超时后连接被阻断.您的许可证对您与伙伴的最大话时间有所限制...... 解决方法: 1.先将自己的teamview完全卸载,连同安装目录一起删除.尽量卸载完全 ...

  3. 一步一步实现web程序信息管理系统之三----登陆业务逻辑实现（验证码功能+参数获取）

    本篇紧接着上一篇文章[一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面] 验证码功能 一般验证码功能实现方式为,前端界面访问一个url请求,后端服务代码生成一个图片流返回至浏览器 ...

  4. background-position为什么会出现负值？

    上篇文章讲到了雪碧图,其中小机器人抖腿的动作设置了图片的background-position:-640px 循环到-1200px,那么这个数值是如何得出来的?下面具体分析一下如何计算backgrou ...

  5. Spring Data MongoDB 基础查询

    有两种方式查询 BasicQuery 和 Query 一.BasicQuery BasicQuery query = new BasicQuery("{ age : { $lt : 26 } ...

  6. numpy数组属性查看及断言

    numpy数组属性查看:类型.尺寸.形状.维度   import numpy as np a1 = np.array([1,2,3,4],dtype=np.complex128) print(a1) ...

  7. ContentProvider与ContentResolver

    使用ContentProvider共享数据: 当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据,但数据 ...

  8. MUI框架-08-窗口管理-创建子页面

    MUI框架-08-窗口管理-创建子页面 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app 官方文档:ht ...

  9. Spring面试 IOC和AOP的理解

    spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...

  10. javascript requestAnimationFrame vs. setTimeout

    在做javascript动画时,我们常常使用的方法就是通过setTimeout调用告诉浏览器每隔20ms执行一段js代码来对dom对象执行操作,这个貌似没有什么问题,但是当深入理解计算机的fps以及浏 ...