Question

移除 this.$scopedSlots

将所有 this.$scopedSlots 替换为 this.$slots

将所有 this.$slots.mySlot 替换为 this.$slots.mySlot()

1. Vue 2.x

当使用渲染函数，即 h 时，2.x 曾经在内容节点上定义 slot 数据 property。

// 2.x 语法
h(LayoutComponent, [
  h('div', { slot: 'header' }, this.header),
  h('div', { slot: 'content' }, this.content)
])

此外，可以使用以下语法引用作用域插槽：

// 2.x 语法
this.$scopedSlots.header

元素渲染方面

<template slot="t1" slot-scope="scope">
	<div>
    具名插槽 t1，数据{{scope.data}}
  </div>
</template>
<!-- 或者 v-slot -->
<template v-slot:t1="scope"> <!-- 简写：#t1="scope" -->
	<div>
    具名插槽 t1，数据{{scope.data}}
  </div>
</template>

2. Vue 3.x

在 3.x 中，插槽以对象的形式定义为当前节点的子节点：

// 3.x Syntax
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})

当你需要以编程方式引用作用域插槽时，它们现在被统一到 $slots 选项中了。

// 2.x 语法
this.$scopedSlots.header

// 3.x 语法
this.$slots.header()

元素渲染方面

移除 slot 和 slot-scope,仅仅保留使用 v-slot

<template v-slot:t1="scope"> <!-- 简写：#t1="scope" -->
	<div>
    具名插槽 t1，数据{{scope.data}}
  </div>
</template>

具名插槽

# 子组件
<div>
  <slot name="header"></slot>
  <slot></slot>
  <slot name="footer"></slot>
</div>

# 父组件
<Dialog>
  <template v-slot:header>
  	<div>1</div>
  </template>
  <template v-slot>
  	<div>2</div>
  </template>
  <template v-slot:footer>
		<div>3</div>
  </template>
</Dialog>

作用域插槽

在子组件动态绑定参数 派发给父组件的 slot 去使用

<div>
  <slot name="header"></slot>
  <div>
    <div v-for="item in 100">
      <slot :data="item"></slot>
    </div>
  </div>
  <slot name="footer"></slot>
</div>

父组件结构取值

<Dialog>
  <template #header>
		<div>1</div>
  </template>
  <template #default="{ data }">
		<div>{{ data }}</div>
  </template>
  <template #footer>
		<div>3</div>
  </template>
</Dialog>

动态插槽

插槽可以是一个变量名

<template>
	<Dialog>
  	<template #[name]>
    	<div>
      	23
  		</div>
		</template>
	</Dialog>
</template>
<script setup>
	const name = ref('header')
</script>