组件通信-子组件向父组件传递数据（自定义事件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 父组件模板 -->
        <div id="app">
            <!-- parent-click 为子组件定义 -->
            <npv @parent-click="itemClick"></npv>
        </div>
        
        <!-- 子组件模板 -->
        <template id="child-template">
            <div>
                <button v-for="item in categories" @click="btnClick(item)">{{item.category_name}}</button>
            </div>
        </template>
        
    
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            // 子组件
            const npv = {
                template: '#child-template',
                data() {
                    return {
                        categories: [
                            {id: 1, category_name: "热门推荐"},
                            {id: 2, category_name: "家用电器"},
                            {id: 3, category_name: "电子产品"},
                        ],
                    }
                },
                methods: {
                    btnClick(item) {
                        // 向父组件发射数据，自定义事件
                        this.$emit('parent-click', item);
                    }
                }
            };
            
            // 父组件
            const vm = new Vue({
                el:"#app",
                components: {
                    npv
                },
                methods:{
                    itemClick(item) {
                        // 接收从子组件中传递过来数据
                        console.log(item);
                    }
                }
            });
        </script>
    </body>
</html>