码迷,mamicode.com
首页 > 其他好文 > 详细

子组件传递给父组件数据

时间:2020-05-18 00:56:10      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:mit   return   incr   utf-8   src   scale   sde   span   实战   

来自书籍《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>

子组件传递给父组件数据

标签:mit   return   incr   utf-8   src   scale   sde   span   实战   

原文地址:https://www.cnblogs.com/kukai/p/12907699.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!