vue2.6新增v-slot指令的使用

用过vue的童鞋,可能对具名插槽和作用域插槽并不陌生吧
具名插槽以前的使用方式是

// 在父组件中注册使用子组件
Parent.vue
<child>
	<h3 slot="myH3"></h3>
</child>
上面的这种写法在 vue2.6中废除
采用新的写法 v-slot
<child>
// 注意 v-slot 只能在template中使用
	<template v-slot="myH3">
		<h3></h3>
	</template>
</child>
子组件中使用
Child.vue
<slot name="myH3"></slot>

作用域插槽,作用是在父组件中可以也可以取到子组件的数据，相当于跨作用域使用数据了
以前的用法是
slot-scope 废除 2.6以后不再使用了

我这里直接展示 v-slot的用法
首先在子组件中
Child.vue
<slot :user="user"></slot>
export default {
	data(){
		return {
			user:{
					name:'小王'
				}
		}
	}
}
//父组件中的用法
Parent.vue
<child>
	<template v-slot="slotProps">
		<h3>{{slotProps.user.name}}</h3>
	</template>
	//你也可以使用结构的方式
	<template v-slot="{ user }">
		<h3>{{user.name}}</h3>
	</template>
</child>

总结来说 vue3.0 是以ts为语言的可能也要很快到来,技术的东西就是日新月异的更新,所会我们时时刻刻跟进技术就算暂时不用我们也要起码知道这个东西,不会再未来的竞争中被淘汰掉是吧.
还是那句老话生活那么苦,为啥不给自己一颗糖吃呢。