vue中的插槽有默认插槽，具名插槽，作用域插槽

可以让组件中的结构支持自定义，

默认插槽：

• 插槽的基本语法：<slot></slot>
• 使用组件时： <组件名>插槽内容</组件名>传入结构替换slot
• 给插槽传入内容时，可以传入纯文本、html标签、组件
• 在组件中使用插槽组件

<template>
  <div>
    <MyDialog>
    您确定要进行删除操作吗？
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

• 插槽组件

<template>
<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>
  
</template>

插槽-后备内容（默认值）

• 封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）
• 在 标签内，放置内容, 作为默认显示内容

    <slot>默认内容</slot>

具名插槽

• 一个组件内有多处结构，需要外部传入标签，进行定制
• 多个slot使用name属性区分名字

 <slot name="header"></slot>
 <slot name="content"></slot>
 <slot name="footer"></slot>

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

<组件名>
  <template v-slot:head>大标题</template>
  <template v-slot:content>内容</template>
  <template v-slot:footer><button>按钮</button></template>
</组件名>

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

 <组件名>
  <template #head>大标题</template>
</组件名>

作用域插槽

• 定义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>