在 Vue.js 中，<slot> 是用于在父组件中传递内容到子组件的一种机制。它允许你在父组件中定义一些内容，并在子组件中使用 <slot> 标签来插入这些内容，从而实现父子组件之间的内容传递和复用。
1.匿名插槽
使用 <slot> 插槽接收父组件传递的内容
父组件
<template><div><h1>父组件</h1><p>这是父组件的内容。</p><ChildComponent></ChildComponent></div>
</template>
子组件
<template><div><h2>子组件</h2><!-- 使用 <slot> 插槽接收父组件传递的内容 --><slot></slot></div>
</template>
2.具名插槽
通过 <slot> 标签的 name 属性来区分不同的插槽
父组件
<template><div><h1>父组件</h1><!-- 使用命名插槽传递内容 --><ChildComponent><template v-slot:title><h2>子组件标题</h2></template><template v-slot:content><p>这是子组件的内容。</p></template></ChildComponent></div>
</template>
子组件
<template><div><h2>子组件</h2><!-- 使用命名插槽接收父组件传递的内容 --><slot name="title"></slot><slot name="content"></slot></div>
</template>
在 Vue 中，slot="footer" 和 v-slot:title 的区别：
slot属性：slot="footer"是在父组件中使用的一种简写语法，用于给具名插槽（Named Slots）命名。- 这种简写语法用于传递内容到子组件中具有特定名称的插槽，比如给子组件中名为 "footer" 的插槽传递内容。
v-slot指令：v-slot:title是 Vue 2.6.0 版本引入的一种新语法，用于在父组件中为具名插槽分配模板内容。- 这种语法可以用于给具名插槽（Named Slots）分配内容，它提供了更加灵活的方式来管理插槽内容。
在 Vue 2.x 中，v-slot 是用于具名插槽的分配语法。在 Vue 3.x 中，v-slot 被替换为 #，成为了更加简洁的写法。
3.作用域插槽
子组件可以通过 slotProps 访问和使用这些数据
父组件
<template><div><h1>父组件</h1><!-- 使用作用域插槽传递数据 --><!-- v-slot:default="slotProps"等价于v-slot="slotProps",只是语义不同 , 简写用法使用es6的解构语法v-slot="{message}" --><ChildComponent v-slot:default="slotProps"><p>{{ slotProps.message }}</p></ChildComponent></div>
</template>
子组件
<template><div><h2>子组件</h2><!-- 使用作用域插槽接收父组件传递的数据 --><slot :message="message"></slot></div>
</template><script>
export default {data() {return {message: '这是子组件的数据'};}
};
</script>
v-slot="slotProps" 和 v-slot:default="slotProps" 有什么区别：
在 Vue 中，v-slot="slotProps" 和 v-slot:default="slotProps" 都是用于作用域插槽（Scoped Slots）的语法
实际上，这两种写法在功能上是等价的，它们都可以用于定义作用域插槽并传递数据到子组件。区别主要在于语法上的不同：
v-slot="slotProps"是v-slot的简写语法，用于定义默认插槽。v-slot:default="slotProps"明确指定了插槽名称为default。
在实际开发中，两种写法可以根据个人习惯和代码风格选择使用。通常情况下，如果只有一个作用域插槽并且不需要指定特定的插槽名称，可以使用 v-slot="slotProps" 的简写方式，简洁且易读。如果需要指定具名插槽的名称，可以使用 v-slot:default="slotProps" 的方式来明确指定插槽名称。
4.在Vue3.x中的简写写法
具名插槽的分配
<ChildComponent><template #title><h2>This is the title</h2></template>
</ChildComponent>
具名插槽的传递
<ChildComponent><p #footer>This is the footer content.</p>
</ChildComponent>
