组件间通信案例练习

1.实现父传子

 App.vue

TabControl.vue

 易错:

:titles='["衣服","鞋子","裤子"]'这里是"[]",不是[]

2.实现点击下方出现颜色条

如何实现点击获取当前index

注意v-for也要写上index,@click写上参数index

export default {
props:{
	titles:{
		type:Array,
		default:()=>[]
	}
},
data()
{
	return{
		currentIndex:0
	}
},
emits:["tabItemClick"],
methods:{
	tabItemClick(index)
	{
		this.currentIndex=index
		this.$emit("tabItemClick",index)
	}
}
}

此处.active无空格 

	.tab-control-item.active

为了确保父组件知道发送了这个函数,emit要写入此函数

emits:["tabItemClick"],
methods:{
	tabItemClick(index)
	{
		this.currentIndex=index
		this.$emit("tabItemClick",index)
	}
}

接着父元素@此函数,

	methods:
	{
		tabItemClick(index)
		{
			console.log("app",index)
		}
	}

全部代码

App.vue

TabControl.vue