vue父組件與子組件通訊demo

看完組件自定義事件以後本身寫的一個小測試。
https://jsfiddle.net/zhoou/6x...

<div id="zj">
    <v-parent></v-parent>
</div>

<template id="parent">
    <div>
        表單內容：{{test}}<br>
        計數：{{n}}<br>
        <input type="text" v-model='test'>
        <v-child  :message='test' v-on:kkk='parentFun'></v-child>    
    </div>
</template>

<template id="child">
    <button v-on:click="childFun">{{num}}</button>
</template>

var zj=new Vue({
    el:'#zj',
    components:{
        'v-parent':{//局部註冊父組件
            template:'#parent',
            data:function(){
                return {
                    test:'初始值',//test的值由父組件模板中的input動態雙向綁定
                    n:0//測試子組件傳遞的數據，若是變化則傳遞成功
                };
            },
            methods:{
                parentFun:function(a){//測試子組件經過$emit傳遞過來的參數
                    this.n=a;
                }
            },
            components:{
                'v-child':{//局部註冊子組件
                    props:['message'],//定義一個變量接收父組件傳遞過來的數據，指向父組件的test值，而且會跟隨input中輸入的內容實時變化
                    template:'#child',
                    data:function(){
                        return {num:0};//測試子組件單機事件
                    },
                    methods:{
                        childFun:function(){
                            //子組件方法，每單機一次數值加1，經過參數'kkk'把子組件處理以後的數據'num'傳遞出去，由父組件的方法接收並顯示
                            this.num++;
                            this.$emit('kkk',this.num);
                        }    
                    }
                }
            }
        }
    }
});