关于vue组件传值和事件绑定问题
<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为事件传参,这样可以在使用者执行事件的时候拿到这个参数值

浙公网安备 33010602011771号