vue: 代码小记 - 爱码网

1.事件派发：子控件->父控件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
            <div>message : {{ message | json }}</div>
            <input type="hidden" v-model="message | json" />
            <child-component></child-component>
        </div>

        <template id="child-component">
            <input type="text" v-model="msg" />
            <button @click="notify">添加事件</button>
        </template>
    </body>
    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:[]
            },
            components:{
                'child-component':{
                    template:'#child-component',
                    data:function(){
                        return {
                            msg:''
                        }
                    },
                    methods:{
                        notify:function(){
                            if($.trim(this.msg)){
                                // 派发事件
                                this.$dispatch('child-msg', this.msg, 222);
                                this.msg = '';
                            }
                        }   
                    }
                }
            },
            // 事件
            events:{
                'child-msg':function(msg, data2){
                    this.message.push(msg);
                    console.log(this.message);
                    console.log(data2);
                }
            }
        });

    </script>
</html>
View Code