24_子传父_组件间通信（$emit）

作者: CHENPEIHUANG | 来源:发表于2018-02-11 06:59 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p>{{count}}</p>
            <comp v-on:add="show"></comp>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('comp',{
                template:"<div><input type='button' :value='num' @click='increment'></div>",
                data(){
                    return{
                        num:1
                    }
                },
                methods:{
                    increment(){
                        this.num++;
                        //第一个参数：指定要触发的外部事件名称
                        //第二个参数及其以后的参数：指定要传递给外界的数据
                        this.$emit('add',20,30,50)
                    }
                }
            })
            
            var vm = new Vue({
                el:"#app",
                data:{
                    count:1
                },
                methods:{
                    show(a,b,c,d){
                        console.log("接收到子组件的事件传递。。。");
                        this.count++;
                        console.log(a);//20
                        console.log(b);//30
                        console.log(c);//50
                        console.log(d);//undifinde
                    }
                }
            })
        </script>
    </body>
</html>