BiKing/pages/login/modules/tab.vue

<template>
	<view class="tab-box">
		<view class="tab">
			<view v-for="(item , index) in marketTab"
			:key="`marketTab_${index}`"
				:class="['tab-item' , index === marketTabIndex ? 'active-tab-item' : '' ]"
				@click.stop="changTab(index)">
				{{ item }}
			</view>

		</view>
		<!-- <component :is="phoneLogin"/> -->
	</view>
</template>


<script>
	export default {
		props: {
			tabIndex: Number,
			default: 0
		},
		data() {
			return {
				marketTabIndex: 0,
				marketTab: [
					'手机号',
					'邮箱'
				]
			};
		},
		watch: {
			tabIndex: {
				handler(newVal) {
					this.marketTabIndex = newVal || 0
				},
				immediate: true,
				deep: true
			},
			marketTabIndex: {
				handler(newVal, oldVal) {
					if (newVal !== oldVal) {
						this.$emit("update:tabIndex", newVal);
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			// marketTabIndex = index
			changTab(index) {
				this.marketTabIndex = index
				// this.$emit('updata:tabIndex', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~./../common.scss"
</style>