uniapp（vue） 组件传值 小练习

一、案例效果  

练习   父到子 ，子到父 和slot插槽

二 、实现代码

① 新建组件 (子组件) Tabs.vue 内容如下：

<template>
	<view class="tabs">
		<view class="tabs-title">
			<view 
			@click="handleTap(index)"
			v-for="(item,index) in Ctabs" :key="item.id"
			class="title-item"
			:class="item.isActive?'active':''"
			>{{item.value}}</view>
		</view>
		<view class="tabs-content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Tabs",
		props:{
			Ctabs:{
				type:Array,
			}
		},
		methods:{
			handleTap(idx){
				 this.$emit('tabsChange',idx)
			}
		}
	}
</script>

<style lang="scss">
.active{
	color: #007AFF;
	border-bottom: 5rpx solid #007AFF;
}
.tabs{
	.tabs-title{
		display: flex;
		.title-item{
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 15rpx 0;
		}
	}
	.tabs-content{
		
	}
}
</style>

 ② 父组件 Detalis.vue 里

<template>
	<view>
		<Tabs :Ctabs="tabs" @tabsChange="handletabsChange">
			<block v-if="tabs[0].isActive">0----内容</block>
			<block v-else-if="tabs[1].isActive">1----内容</block>
			<block v-else>2内容----</block>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '@/components/Tabs.vue'
	export default {
		components:{
			Tabs
		},
		data() {
			return {
				tabs:[
					{
						id:0,
						value:'综合',
						isActive:true
					},
					{
						id:1,
						value:'销量',
						isActive:false
					},
					{
						id:2,
						value:'价格',
						isActive:false
					}
				]
			};
		},
		onLoad(options) {
			console.log(options);
		},
		methods:{
			handletabsChange(idx){
				this.tabs.forEach((v,i)=>i==idx?v.isActive=true:v.isActive=false)
			}
		}
	}
</script>