Vue插槽 slot 标签
Vue 插槽 slot 标签：
作用：让父组件可以向子组件指定的位置插入一段 html 结构，也属于一种组件之间的通信方式，适用于父传子
不使用插槽：
创建 List 组件，接收父元素传递的数据，用于显示分类列表。
{{ title }}分类
- {{ item }}
在 Home 页面中引用 List 组件，并传递对应的数据。
注：组件会根据数据渲染不同的内容，但结构都是一样的。如果想在组件中渲染不同的结构，就需要用到 slot 标签了。
备注：组件中的结构并不是一直不变的，有时候需要根据需求动态调整组件的结构内容。
默认插槽：
在 List 组件中，删除不确定的结构，替换为 slot 标签。并且 slot 标签还可以设置默认值。
{{ title }}分类
默认值，如果没有传递具体的结构，显示的内容
在 Home 页面，给每个 List 组件标签添加对应的内容即可。如果没有指定内容，就会显示 slot 标签中的默认值。
- {{ item }}
注：组件标签中的结构在父组件中就会被解析，而不是先传到 slot 中再解析。所以数据要放在父组件中渲染，而样式放在父组件或子组件中都可以。
具名插槽：
如果组件中需要多个插槽，就需要给 slot 标签定义名称了，用于区分存放的内容。
{{ title }}分类
第一个插槽
第二个插槽
在使用组件时，需要给内容添加 slot 属性，用于指定放到哪个 slot 标签中。
注：如果不给内容添加 slot 属性，页面中是不会显示这块内容的。例如第三个分类。
备注：还可以使用 v-slot:名称 的方式指定，但是 v-slot 只能在 template 标签中使用。
如果不定义名称，是不会显示的
原创作者：吴小糖
创作时间：2023.8.26