Vue 具名插槽 v-slot指令替换slot和slot-scope

在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。slot 和 slot-scope 这两个目前已被废弃，仍可使用，据说3.0后要没了

旧slot用法

子组件：

<div>
	<slot name=“test”></slot>
</div>

父组件中使用：

<div>
	<template slot="test">
	</template>
</div>

旧的slot-scope（访问子组件中的数据）

子组件：

<div>
	<slot name=“test” :customerData=“testData”></slot>
</div>

父组件中在template获取子组件testData数据使用：

<div>
	<template slot="test" slot-scope=“data”>
		{{data.customerData}}
	</template>
</div>

新的v-slot 替换slot用法

子组件同上

父组件中使用：

<div>
	<template #test>
	</template>
</div>

新的v-slot 替换slot-scope用法

子组件同上

父组件中使用：

<div>
	<template #test="{data}">
		{{data.customerData}}
	</template>
</div>

总结：

1、其中#是v-slot:test的简写，只有具名才可简写否则就要#default，类是以v-bind 用：简写类似

2、

3、只要记住slot（子组件未变），变得是父组件中的使用，slot和slot-scope替换为v-slot

千里之行
始于足下