vue组件插槽

插槽的作用：

让组件的服用更加灵活 提高组件的复用性

默认插槽：

1. 在组件内使用 slot 标签占位，在slot标签内的内容为默认内容，如果不传值，则显示默认内容

2. 使用组件时将自定义标签传入组件内

具名插槽

当组件中有多个内容不确定时，通过具名插槽区分

1. 在子组件的slot标签上设置name属性

2.父组件的template上结合  v-slot:子组件的name值  来指定对应的插槽

子组件：

<template>
  <div>
<slot name="title">
    不传值的默认内容
</slot>
<slot name="content">
 不传值的默认内容
</slot>
  </div>
</template>

父组件：

  <template v-slot:title>
          <h4>芙蓉楼送辛渐</h4>
        </template>
        <template v-slot:content>
          <img src="../assets/mm.gif" alt="">
          <span>我是内容</span>
        </template>

作用域组件

子组件往插槽上绑定数据, 父组件使用时可接收

1.在子组件slot标签使用v-bind绑定数据

2. 使用组件时在 template 标签上使用 v-slot="变量名" 来接收传递过来的数据

一般都是使用row和scope

子组件：

<slot :row="obj">
</slot>

父组件：

 <template v-slot="scope">
          
       </template>