【Vue2】slot 插槽全家桶

插槽-默认插槽

插槽的基本语法

1. 组件内需要定制的结构部分，改用<slot></slot>占位
2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot
3. 给插槽传入内容时，可以传入纯文本、html标签、组件

插槽-默认值

封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）。

• 外部使用组件时，不传东西，则slot会显示后备内容

  

• 外部使用组件时，传东西了，则slot整体会被换掉

  

插槽-具名插槽

一个组件内有多处结构，需要外部传入标签，进行定制 。

默认插槽只能定制一个位置，所以需要使用具名插槽。

具名插槽语法

• 多个slot使用name属性区分名字

  

• template配合v-slot:名字来分发对应标签

  

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

作用域插槽

插槽分类

• 默认插槽

• 具名插槽

  插槽只有两种，作用域插槽不属于插槽的一种分类

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用

使用步骤

1. 给 slot 标签, 以 添加属性的方式传值

   <slot :id="item.id" msg="测试文本"></slot>
   

2. 所有添加的属性, 都会被收集到一个对象中

   { id: 3, msg: '测试文本' }
   

3. 在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

   <MyTable :list="list">
     <template #default="obj">
       <button @click="del(obj.id)">删除</button>
     </template>
   </MyTable>