什么是插槽

        子组件提供给父组件的占位符，用 slot 元素来表示，

        父组件可以在这个占位符里面填充各种模板代码。      

---

1. 匿名插槽：

        父组件引入子组件，在子组件内留 标签，

        就可以在父组件中的子组件标签中写入内容。

        例：

                父组件:

<template><div><h1>父组件</h1><!-- 子组件标签 --><Comp><p>匿名插槽</p></Comp></div>
</template><script>import Comp from "./子组件.vue"export default {components:{Comp,},data(){return {};},}
</script><style lang="less" scoped></style>

        子组件：

<template><div><p>子组件</p><--  slot 占位符  --><slot></slot>   </div>
</template><script>export default {}
</script><style lang="less" scoped></style>

---

2. 具名插槽：

        子组件内的 标签添加 name 属性，

        父组件写入内容时，在子组件标签内用 v-slot:插槽名称 属性，便可将数据放在指定位置 ( 简写 #插槽名称 )

        例：

                父组件：

<template><div><h1>父组件</h1><!-- 子组件标签 --><Comp>    <p>匿名插槽</p><template v-slot:top><div >具名插槽-top</div></template><template #footer><div >具名插槽-footer</div></template></Comp></div>
</template><script>import Comp from "./子组件.vue"    export default {data(){return {};},components:{Comp,},}
</script><style lang="less" scoped></style>

                子组件：

<template><div><p>子组件</p><slot name="top"> 具名插槽 </slot> <slot></slot><slot name="footer"> 具名插槽  </slot>    </div>
</template><script>export default {}
</script><style lang="less" scoped></style>

---

3. 作用域插槽：

        能传递数据，父组件可以接收子组件传递的数据

        格式：v-slot : 插槽名称 = “ props ”

        例：

                父组件：

<template><div><h1>父组件</h1><Comp><p>匿名插槽</p><!-- 子组件传递的值存入自定义变量 --><template v-slot:top="props"> <div><p>具名插槽-top</p></div><!-- 通过自定义变量引出子组件传入数据 --><p>tex1: {{ props.text1 }}</p>  </template><template #footer="NewProps"><div>具名插槽-footer</div><p>tex2: {{ NewProps.text2 }}</p></template></Comp></div>
</template><script>
import Comp from "./子组件.vue";
export default {data() {return {};},components: {Comp,},
};
</script><style lang="less" scoped></style>

                子组件：

<template><div><p>子组件</p><!-- 单向绑定数据传值 --><slot name="top" :text1="1"></slot><slot></slot><slot name="footer" :text2="2"></slot></div>
</template><script>
export default {data() {let arr = 3;},
};
</script><style lang="less" scoped></style>

注意：

        1. vue3 只能用 v-slot

        2. v-slot 是从 2.6.0+ 开始使用在此之前的格式为：

 <template slot="top" slot-scope="props"> <div><p>具名插槽-top</p></div><!-- 通过自定义变量引出子组件传入数据 --><p>tex1: {{ props.text1 }}</p>  
</template>

---

4. 动态插槽：

        格式： v-slot : [ 变量插槽名 ]

        简写： #[ 变量插槽名 ]

        例：

                父组件：

<template><div><h1>父组件</h1><Comp><p>匿名插槽</p><!-- 动态插槽名 --><template v-slot:[name]="props"> <div><p>具名插槽-top</p></div><!-- 通过自定义变量引出子组件传入数据 --><p>tex1: {{ props.text1 }}</p>  </template><template #footer="NewProps"><div>具名插槽-footer</div><p>tex2: {{ NewProps.text2 }}</p></template></Comp></div>
</template><script>
import Comp from "./子组件.vue";
export default {data() {return {name:"top"   // 定义一个变量};},components: {Comp,},
};
</script><style lang="less" scoped></style>