关于vue组件传值和事件绑定问题

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<template>   <view style="width: 100%; height: 100%;">     <view class="tabs">       <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="current==index&&'active'" @click="change(index)">       {{tab.title}}       </view>     </view>           <view class="swiper-box" v-for="(item ,index) in tabs" :key="index">             <!-- #ifdef MP -->             <slot name="{{'content' + index}}"></slot>                <!-- #endif -->             <!-- #ifndef MP -->             <slot :name="'content'+index"></slot>             <!-- #endif -->           </view>   </view> </template>   <script>     export default {     name: 'swiperTab',     props: {       currentTab: {         type: Number,         default: 0       },       tabs: {         type: Array,         default: Array       }     },         data() {             return {                 current: this.currentTab             };         },     methods: {       change(e) {         this.current = e;         this.$emit('change', e);       },       scrolltolower(e) {         this.$emit('onReachBottom', this.current);         console.log(this.current)       }     }     } </script>

　　

<aloys-tab :tabs="tabs" @change="onTabChange">

</aloys-tab>

onTabChange(e) {
    this.index = e
},
                

1.this.$emit('change', e);   $emit 可以自定义一个事件，当组件执行这个事件的时候，可以绑定一个自定义事件给使用者

2.e为事件传参，这样可以在使用者执行事件的时候拿到这个参数值