【Vue】默认插槽

要点：

slot 插槽

<slot>插槽：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，
适用于 父组件 ===> 子组件
1、分类：默认插槽、具名插槽、作用域插槽
2、使用方式：
        a、默认插槽

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：Category
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

小案例：

简单的实现

但是现在如果在进行单个图片的展示

如果直接改的话, 就会一起都改了

如果用 v-show 来解决代码就会很乱而且万一需求多了就不好处理

解决办法

在组件标签里面写标签体内容

但是如果这样写发现没有出现图片

此时 vue 时解析了的只是不知道要往组件里哪放所以干脆就不放, 所以我们必须在组件里写一些东西告诉 vue 往这放

写入 slot 标签（插槽）告诉 vue 你前面写的组件标签里面的标签体体往这放

而且还可以传递一些默认值

当不传时

就会显示 slot 标签里面的文字, 如果传就会显示组件标签里面的内容

当放入的视频不能播放时在 video 标签上加上 control

注意：

这三个标签最终都是塞到了 category 组件里的 slot 标签里的

而这个组件标签里面的标签体是在 app 解析完之后才塞进 category 组件里的 slot 标签里的

也就是说, 可以把这些内置标签的样式写在 app.vue 的 style 样式里, 用于控制