基础不牢的把vue的插槽再好好看下吧

插槽

基本概述

1. 插槽是为未来可能传入的信息，预留位置的一个占位符
2. 插槽可以设置默认的内容，类似ES6形参默认值
3. 具名插槽
   • 子组件可以定义多个插槽，每个插槽取个名字，父组件根据名字向插槽中传数据
   • 注意 v-slot 只能添加在 template 标签 上 (只有一种例外情况)
4. 作用域插槽
   • 默认情况下，插槽中定义的数据是当前实例的数据；因此，要想让其他组件访问到插槽组件内定义的数据，就需要在插槽组件的插槽上暴露出数据。
   • 单个插槽
     • 插槽组件通过:data="data"暴露数据
     • 父组件（可以在插槽组件标签上）通过v-slot:default="slotProps"来获取插槽组件数据
   • 多个插槽（那就是有具名插槽）
     • 插槽组件通过:data="data"暴露数据，name="god"提供插槽名称
     • 父组件（不可以在插槽组件标签上，只能在template模板标签上）通过v-slot:god="slotProps"来获取具名插槽组件数据!
5. 其他
   • 插槽简写
     • v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
   • 作用域插槽解构赋值
     • 例如v-slot:default="sonData"，可以对sonData直接进行ES6对象解构；v-slot:default="{ reason }"
   • 动态插槽名
     • 正常 v-slot:slotName -> 动态 v-slot:[slotName]
   • slot-scope等过时语法
     • https://cn.vuejs.org/v2/guide/components-slots.html#废弃了的语法

默认内容

// 父组件
<template>
  <div>
    <p>我是dad</p>
    <!-- 向插槽中传递内容 -->
    <Son> <h1>我是默认传到子组件插槽中的内容</h1> </Son>
  </div>
</template>

<script>
import Son from "./SonItem.vue";
</script>


// 子组件

<template>
  <div>
    <p>我是儿子组件</p>
    <!-- 提供一个插槽的默认值 -->
    <slot>没人向我的插槽里传数据的话，我默认就是🐖</slot>
  </div>
</template>

具名插槽

// 父组件
<template>
  <div>
    <p>我是dad</p>
    <!-- 根据名字向插槽中传递内容(乱序) -->
    <Son>
      <template v-slot:dog>柴犬</template>
      <template v-slot:giao>小啊giao</template>
      <template v-slot:pig>摇摇猪</template>
    </Son>
  </div>
</template>

<script>
import Son from "./SonItem.vue";
</script>


// 子组件

<template>
  <div>
    <p>我是儿子组件</p>
    <slot name="pig">我是🐖</slot>
    <slot name="dog">我是🐕</slot>
    <slot name="giao">我是giao</slot>
  </div>
</template>

作用域插槽

// 父组件

// 情况一：只有一个插槽
<template>
  <div>
    <p>我是dad</p>
    <!-- 只有一个插槽，可以在组件标签上这样传递；-->
    <!-- 可以简写v-bind="sonData"；-->
    <Son v-slot:default="sonData">
      {{ "为什么会被天蝎男拒绝呢？" + sonData.reason }}
      {{ "为什么会被一聊天他就去洗澡呢？" + sonData.reason }}
      {{ "为什么这么久都没有对象呢？" + sonData.reason }}
    </Son>
  </div>
</template>

// 情况二：有多个插槽（存在具名插槽）
<template>
  <div>
    <p>我是dad</p>
    <!-- 不可以在组件标签上使用v-slot，只能使用template -->
    <Son>
      <template v-slot:default="sonData">
        {{ "为什么会被天蝎男拒绝呢？" + sonData.reason }}
        {{ "为什么会被一聊天他就去洗澡呢？" + sonData.reason }}
        {{ "为什么这么久都没有对象呢？" + sonData.reason }}
        {{ "为什么这么久都没有对象呢？" + sonData.reason }}
      </template>

      <!-- 通过v-slot:插槽名称="数据对象" 来获取数据；-->
      <template v-slot:god="data">
        {{ data.excuse }}
      </template>
    </Son>
  </div>
</template>




// 子组件

<template>
  <div>
    <p>我是儿子组件</p>
    <slot :reason="reason"></slot>
    <!-- 有多个插槽
    <slot :excuse="excuse" name="god"></slot> 
    -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      reason: "还不是因为你长的不好看",
      excuse: "穷",
    };
  },
};
</script>

打牢基础，一步一个脚印，慢就是快，越慢越快