vue子组件向父组件传值的问题

<div id="app">

    <cpn1 @chuansong="cpnClick"></cpn1>
    <!--在父组件中绑定点击事件，这里绑定的是自定义事件，名字要是 @子方法名字 = "父方法名字"-->

</div>
<template id="cpn1">
    <!--<h1 >{{one}}</h1>-->
    <div>
        <!--给子组件的内容绑定事件-->
        <button v-for="item in person" @click="btnClick">{{item.name}}</button>

    </div>

</template>
<script>


    const cpn1 = {
        template : '#cpn1',
        //值绑定
        //props: ['one']
        data(){
            return {
                person: [
                    {id : 'zhangsan',name : 'zhanghsan'},
                    {id : 'lisi',name :'lisi'}
                ]
            }
        },
        //第一是在子组件内写好click事件,用 this.$emit()去发射给父组件，
        methods: {
            btnClick(item){
                console.log(item);
                this.$emit('chuansong',item)
            }
        }
    }


    const app = new Vue({
        el: '#app',
        data: {
            hobbies:['1','2','3'],
        },
        components:{
            cpn1 : cpn1
        },
        methods: {
            //父组件接收子组件发射的请求
            cpnClick(item){
                console.log('1111'+item)
            }
        }
    })
</script>