Vue3 slot 插槽 v-slot 具名插槽 作用域插槽

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

可以在<slot>标签内设置插槽的默认内容。

1. 当只有匿名插槽时，可直接在父级子组件元素内添加内容，该内容会添加到slot对应位置
2. 当存在多个插槽时，需要对它们设定 name

<!-- 子组件中添加插槽并设定name -->
<slot name="xxxxx" :childData="data"></slot>

<!-- 父组件中引用 -->
<子组件名>
	<template v-slot:xxxxx="childData">
    	插入内容
    	{{childData}}
  	</template>
</子组件名>

匿名插槽的name为default

v-slot

v-slot 一般只能添加在 <template> 上，除非：

针对匿名插槽 不带参数的 v-slot 被假定对应default默认 匿名插槽 可以在组件名内添加 v-slot ，实现简写
注：默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确

如果想在父级调用子组件的data
可在子组件<slot> 元素中将其绑定为属性

<slot :data1="data1" :data2="data2"></slot>

绑定在 <slot> 元素上的 attribute 被称为 插槽 prop

<template v-slot:default="arbitraryName">
	<!-- arbitraryName可以访问到绑定的 插槽 prop -->
    <span>{{ arbitraryName.data1}}</span>
</template>

还可以使用解构的方式 获取插槽prop
v-slot="{ data1 }"
还可以重命名 v-slot="{ data1: todo }"
或是设置 备用值 v-slot="{ data1= 'Placeholder' }"

动态指令参数也可以用在 v-slot 上 v-slot:[dynamicSlotName]

v-slot: 缩写 #

在 2.6.0 中 slot 具名插槽 和 slot-scope 作用域插槽 被一个新的统一的语法 (即 v-slot 指令)取代。
slot= --> v-slot:

插槽样式

1. 通过外层div来影响插槽内容的样式

<div class="child">
  <slot></slot>
<div>
<style lang="sass">
.child {
  xxx
  * {
    xxx
  }
}
</style>

2. 父元素中 使用 deep 做样式穿透

不建议取消 scoped，不利于样式管理