zoukankan      html  css  js  c++  java
  • 子组件传递给父组件数据

    来自书籍《vue.js实战》
    子组件使用$emit()触发事件,父组件用v-on来监听子组件事件
    $emit('自定义事件名',传给父组件的数据)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    </head>
    <body>
        <div id="app">
            <p>总数:{{total}}</p>
            <my-component @increase1="handleGetTotal" @reduce="handleGetTotal"></my-component>
        </div>
        <script>
            Vue.component('my-component',{
                template:'
                <div>
                <button @click="handleIncrease">+1</button>
                <button @click="handleReduce">-1</button>
                </div>',
                data:function(){
                    return {
                        counter:0
                    }
                },
                methods:{
                    handleIncrease:function(){
                        this.counter++;
                        this.$emit('increase1',this.counter);
                    },
                    handleReduce:function(){
                        this.counter--;
                        this.$emit('reduce',this.counter);
                    }
                }
            }
            );
            var v=new Vue({
                el:"#app",
                data:{
                    total:0
                },
                methods:{
                    handleGetTotal:function(total){
                        this.total=total
                    }
                }
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    Eclipse相关问题
    分词工具比较(转)
    package-info.java文件详解
    如何在大量jar包中搜索特定字符
    eclipse插件在线发布发布和版本更新(web site) 转
    Peer Code Reviews Made Easy with Eclipse Plug-In
    Eclipse中Ant的配置与测试 转
    astyle 使用说明
    Eclipse远程调试出现“JDWP Transport dt_socket failed to initialize”的解决方案
    记录一个中括号的问题
  • 原文地址:https://www.cnblogs.com/kukai/p/12907699.html
Copyright © 2011-2022 走看看