Vue插槽 slot 标签

Vue 插槽 slot 标签：
作用：让父组件可以向子组件指定的位置插入一段 html 结构，也属于一种组件之间的通信方式，适用于父传子 

不使用插槽：

创建 List 组件，接收父元素传递的数据，用于显示分类列表。

在 Home 页面中引用 List 组件，并传递对应的数据。

注：组件会根据数据渲染不同的内容，但结构都是一样的。如果想在组件中渲染不同的结构，就需要用到 slot 标签了。

 备注：组件中的结构并不是一直不变的，有时候需要根据需求动态调整组件的结构内容。

 默认插槽：

在 List 组件中，删除不确定的结构，替换为 slot 标签。并且 slot 标签还可以设置默认值。

在 Home 页面，给每个 List 组件标签添加对应的内容即可。如果没有指定内容，就会显示 slot 标签中的默认值。

注：组件标签中的结构在父组件中就会被解析，而不是先传到 slot 中再解析。所以数据要放在父组件中渲染，而样式放在父组件或子组件中都可以。

 具名插槽：

如果组件中需要多个插槽，就需要给 slot 标签定义名称了，用于区分存放的内容。

在使用组件时，需要给内容添加 slot 属性，用于指定放到哪个 slot 标签中。

注：如果不给内容添加 slot 属性，页面中是不会显示这块内容的。例如第三个分类。

 

 备注：还可以使用 v-slot:名称 的方式指定，但是 v-slot 只能在 template 标签中使用。

原创作者：吴小糖

创作时间：2023.8.26