自定义vue点击事件传递数据

1.定义一个自定义TabControl.vue，定义它的点击事件
@click="itemClick(index)，如下

 <div v-for="(item,index) in titles" :key="index" class="tab-control-item" 
   :class="{active: index===currentIndex}" @click="itemClick(index)">

2.实现itemClick(index)方法中，并通过this.$emit('tabClick',index);将点击事件传递到外面

methods:{
        itemClick(index){
            this.currentIndex = index;
            // 将点击事件传到外面去
            this.$emit('tabClick',index);
        }
    }

3.在其Home.vue页面使用TabControl.vue
通过绑定tabClick的事件(也就是传出来的方法名)来监听控件的点击和数据传递

    <tab-control :titles="['流行','新款','精选']" class="tab-control" @tabClick="tabItemClick"/>

在Home.vue页面中定义方法tabItemClick来接收点击TabControl传过来的数据

 methods:{

    tabItemClick(index){
      console.log(index);
    },
}