Vue 插槽(slot)使用(通俗易懂)

// father 组件
<son>
   <div>想要替换的内容</div>
</son>

// son 组件 被替换的内容
<slot>  </slot> 

// son 组件 
// 如果father 有传递过来的值 则替换掉 默认的值 否则显示默认值
<slot> 我是默认值 </slot>

具名插槽

在给 slot 起名字 就是具名插槽，具体怎么使用 上代码！

// son 组件  给 slot 添加name=”名字“ 我相信大家这么聪明 这三行代码 肯定可以看懂 
<slot name="head"> </slot>
<slot name="content"> 我是默认文本内容 </slot> 
<slot name="footer"> </slot>

// father 组件  大家这里仔细看
 <son>
      <!-- 需要通过 template 标签 包裹需要 -->
      <template v-slot:head>
        <div>我是头部</div>
      </template>

      <template v-slot:content>
        <p>我是内容</p>
      </template>

      <!-- v-slot:插槽名 可以简化成为 #插槽名 -->
      <template #footer>
        <p>我是底部</p>
      </template>
    </son>

作用域插槽

顾名思义 就是 在一定的区域内 才能使用的 局部作用域知道吧 类似差不多都

这里其实 还会有一个 点击删除和查看 会返回一个对象信息 里面包含 该数组的各种信息 可以删除和具体查看内容 这里我就不展示了 想了解的同学 留言我会更新的 大家记住 slot 返回的是一个对象

// father 组件
<template>
  <div>
    <!-- 1. 父传子 把数组1传递过来 -->
    <MyTable :data="list1">
      <!-- #default 代表默认插槽 只有一个的时候才可以使用 -->
      <template>
        <!-- 打印 obj 确实可以看到他是一个对象 找到id 输出即可 -->
        <button>删除</button>
      </template>
    </MyTable>

    <!-- 父传子 把数组2传递过来 -->
    <MyTable :data="list2">
      <template>
        <!-- 只有一个位置需要替换 所以使用默认插槽就行 -->
      <button>查看</button>
      </template>
    </MyTable>
  </div>
</template>

在son.vue中接收数组 利用父传子

// son 组件 
// 两个数组 公用一个表单 只不过在表单后面 改成 删除/查看而已
<tbody>
      <!-- 利用 for 循环 输出  这里 肯定都能看懂吧  -->
      <tr v-for="(item,index) in data" :key="index.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name}}</td>
        <td>{{ item.age}}</td>
        <td>
          <!-- slot 占位  等待传参 -->
          <!-- 利用哪个数组 哪个数组中的 button 值就会传递过来 -->
          <slot></slot>
        </td>
      </tr>
    </tbody>

// son 组件
export default {
  // 2.接收传递过来的数组 并确定类型 都以data命名 两个数组
  props: {
    data: Array,
  }
}