$emit回调

参考：https://blog.csdn.net/CRMEB/article/details/112471770
参考：https://juejin.cn/post/6844903734380593160

    <div id="app">
      <main-view @btn-click="descclick"></main-view>
      <p>分类id：{{ id }} <br>名称name：{{ name }}</p>
    </div>
    
    <template id="desc-view">
      <div>
        <button type="button" @click="itemClick(item)" v-for="item in categorylist">{{ item.name }}</button>
      </div>
    </template>
    
    <script type="text/javascript">
      
      Vue.component('main-view',{
        template:"#desc-view",
        data:function(){
          return{
            message: 'Hello Vue',
            categorylist:[
              {id: 1, name: '生鲜优选'},
              {id: 2, name: '手机数码'},
              {id: 3, name: '家用电器'},
              {id: 4, name: '电脑办公'},
            ]
          }
        },
        methods:{
          // 子组件中定义	
          itemClick: function(item){
            // 发射自定义事件
            this.$emit('btn-click', item)
          }
        }
      });
      
      const app = new Vue({
        el: "#app",
        data:{
          id: '',
          name:''
        },
        methods:{
          // 接收事件，父组件中接收
          descclick:function(item){
            categorylist = ('descclick', item)
            console.log('descclick', item)
            this.id = categorylist.id
            this.name = categorylist.name
          }
        }
      })
    </script>