vue组件通信问题

Question

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

<template id="parent">
    <div>
        计数：{{test}}<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:'初始值',
                    n:0
                };
            },
            methods:{
                parentFun:function(a){
                    this.n=a;
                }
            },
            component:{
                'v-child':{
                    props:['message'],
                    template:'#child',
                    data:function(){
                        return {num:0};
                    },
                    methods:{
                        childFun:function(){
                            this.num++;
                            this.$emit('kkk',this.num);
                        }    
                    }
                }
            }
        }
    }
});

请问为什么控制台老是提示子组件不存在呢？我改了名称格式还是一直提示。

Answer 1

是components 少个s