基础不牢的把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#废弃了的语法

默认内容

// 父组件


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


// 子组件

<template>
  <div>
    <p>我是儿子组件p>
    
    <slot>没人向我的插槽里传数据的话，我默认就是🐖slot>
  div>
template>

具名插槽

// 父组件


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


// 子组件

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

折叠 

作用域插槽

// 父组件

// 情况一：只有一个插槽


// 情况二：有多个插槽（存在具名插槽）
<template>
  <div>
    <p>我是dadp>
    
    <Son>
      <template v-slot:default="sonData">
        {{ "为什么会被天蝎男拒绝呢？" + sonData.reason }}
        {{ "为什么会被一聊天他就去洗澡呢？" + sonData.reason }}
        {{ "为什么这么久都没有对象呢？" + sonData.reason }}
        {{ "为什么这么久都没有对象呢？" + sonData.reason }}
      template>

      
      <template v-slot:god="data">
        {{ data.excuse }}
      template>
    Son>
  div>
template>




// 子组件

<template>
  <div>
    <p>我是儿子组件p>
    <slot :reason="reason">slot>
    
  div>
template>

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


折叠 

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