子组件往父组件通讯(七）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
            <runoob @item-click="cpnclick"></runoob>
        </div>

        <template id="treeLeft">
            <div>
                <button v-for="tree in cate" @click="btnclick(tree)">{{tree.name}}</button>
            </div>
        </template>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello'
                },
                methods: {
                    cpnclick: function(itemid) {
                        console.log(itemid);
                    }
                },
                components: {
                    runoob: {
                        template: '#treeLeft',
                        data: function() {
                            return {
                                cate: [{
                                        id: 'aaa',
                                        name: '热门推荐'
                                    }, {
                                        id: 'bbb',
                                        name: '手机数码'
                                    },
                                    {
                                        id: 'ccc',
                                        name: '家电家用'
                                    },
                                    {
                                        id: 'ddd',
                                        name: '手机电脑'
                                    },
                                ]
                            }
                        },
                        methods: {
                            btnclick: function(item) {
                                this.$emit('item-click', item.id)
                            }
                        }
                    }
                }
            })
        </script>
        <!-- 小结：父传子组件用 props
          子传父用 $emit('父监听事件',参数)
             this.$emit('item-click', item.id)
          组件使用：<runoob @item-click="cpnclick"></runoob>
                    cpnclick：在methods中自定义！-->
    </body>
</html>