<!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. Grpc helloworld demo的经验

    GreeterGrpc.java这个文件是插件protoc-gen-grpc-java生成的 刚开始直接用类似如下的指令无法生成GreeterGrpc.java文件  protoc --java_ou ...

  2. 【SSH网上商城项目实战18】过滤器实现购物登录功能的判断

    转自:https://blog.csdn.net/eson_15/article/details/51425010 上一节我们做完了购物车的基本操作,但是有个问题是:当用户点击结算时,我们应该做一个登 ...

  3. HTML新手推荐

    对于前端的学习要先了解一下浏览器和html的发展史其次看看这篇文章:https://kb.cnblogs.com/page/129756/#chapter1我读到这句话时候感觉到了科技这个东西有很多时 ...

  4. js-99乘法表的练习

    <html> <head> <title>World</title> <style type="text/css"> & ...

  5. Java 社区论坛 - Sym 1.5.0 发布

    简介 Sym 是一个用 Java 写的实时论坛,欢迎来 体验!(如果你需要搭建一个企业内网论坛,请使用 SymX) 非常详细的 Sym 功能点脑图 如果你在搭建或者二次开发时碰到问题,欢迎加 Q 群 ...

  6. java中的==、equals()、hashCode()源码分析（转载）

    在java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际的编程总结一下. 1. ==  java中的==是比较两个对象在JVM中的地址.比较好理解.看下面的代码: ...

  7. Ubuntu 安装 PhpMyAdmin 图文教程

    Ubuntu 安装 PhpMyAdmin 管理 MySQL 数据库 PhpMyAdmin 是一个用 PHP 编写的软件工具,可以通过 web方式控制和操作 MySQL 数据库.通过 phpMyAdmi ...

  8. 微信小程序开发常见之坑

    https://www.cnblogs.com/shunxing/articles/6971648.html input里的value会在浮层上面的,要解决这一问题还是很简单的,在小程序中input有 ...

  9. 关于VSTS自动Build报错问题之Microsoft.Net.Compilers

    报错内容如下: --06T11::.6035712Z ##[error]Dotnet command failed with non-zero exit code on the following p ...

  10. LeetCode5 最长回文子串

    最长回文子串 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" ...