Vue初学18-父子组件间的数据传递-子传父

父子组件间的数据传递，父传子通过属性props，子传父通过事件$emit

应用场景如下：子组件有一个列表，子组件的列表被点击后，将被点击的列表项数据传递给父组件。

组件的数据通过data()函数返回，生成列表如下:

    <div id="app">
        <mycpn></mycpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for="item in lists">{{item.name}}</li>
            </ul>
        </div>
    </template>
    <script>

        //相当于vue的子组件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '产品列表',
                    lists:[
                        {'num':'1','name':'家用电器'},
                        {'num':'2','name':'男装'},
                        {'num':'3','name':'女装'}
                    ]
                }
            }
         }
        //创建并注册组件
        Vue.component('mycpn',mycpn);
        //vue相当于父组件
        const vue = new Vue({
            el:"#app",
            components:{
                mycpn:mycpn
            }
        });
    </script>

效果如下：

列表绑定click事件，并通过$emit传递给父组件，$emit('事件名','参数') ，事件名是父组件接收时要注册的事件名称，参数是要传递给父组件的参数。完整代码如下所示：父组件根据$emit传递的数据，注册@itemclick事件，接收参数，并将参数在控制台打印。

 <div id="app">
        <mycpn @itemclick="cpnclick"></mycpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for="item in lists" @click="itemClick(item)">{{item.name}}</li>
            </ul>
        </div>
    </template>
    <script>

        //相当于vue的子组件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '产品列表',
                    lists:[
                        {'num':'1','name':'家用电器'},
                        {'num':'2','name':'男装'},
                        {'num':'3','name':'女装'}
                    ]
                }
            },
            methods:{
                itemClick(item){
                    this.$emit('itemclick',item)
                }
            }
         }
        //创建并注册组件
        Vue.component('mycpn',mycpn);
        //vue相当于父组件
        const vue = new Vue({
            el:"#app",
            components:{
                mycpn:mycpn
            },
            methods:{
                cpnclick(item){
                    console.log(item)
                }
            }
        });
    </script>

点击家用电器，效果如下所示：