插槽的理解

最新推荐文章于 2023-06-22 21:26:04 发布

前端达闻西

最新推荐文章于 2023-06-22 21:26:04 发布

阅读量1k

点赞数 2

分类专栏： js javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/DWX_top/article/details/126392818

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

文章目录

一、插槽概念

介绍：

slot插槽、首先这个插槽是使用在子组件的。
子组件为了自己的复用性更高，就会在子组件里面挖坑，然后再父组件里面去填坑

使用：

slot一般都是子组件定义主体部分
父组件引入子组件、然后父组件根据需求不同、去向子组件里面的插槽添加内容

二、普通slot插槽

2.1 基本使用

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 使用子组件 -->
    <Son>
      <!-- 在子组件里面去写给slot里面的东西 -->
      写给插槽的一封信
    </Son>
  </div>
</template>

<script>
// 引入子组件
import Son from "./son.vue";
export default {
    // 注册组件
  components: {
    Son,
  },
};
</script>

/src/views/son.vue(子组件)

<template>
    <div>
        <h2>我是子组件（为了复用）</h2>
        <!-- 插槽 -->
        <slot></slot>
    </div>
</template>

2.2 使用升级？

当我需要很多个插槽、然后每一个插槽放对应插槽的东西

出现问题：本想一个插槽一份数据、现在每一个插槽两份数据。

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>

    <!-- 这是复用子组件的内容 -->
    <Son>
      <!-- 再组件里面去写给slot里面的东西 -->
      <h2>这是传给第一个插槽的</h2>
      <h3>这是传给第二个插槽的</h3>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";

export default {
    // 注册组件
  components: {
    Son,
  },
};
</script>

/src/views/son.vue(子组件)

<template>
    <div>
        <h2>我是子组件（为了复用）</h2>
        <!-- 写了两个插槽 -->
        <slot></slot>
        <slot></slot>
    </div>
</template>

2.3 slot具名插槽

作用：

一个萝卜一个坑，将父组件的内容插入到指定的子组件位置中去

语法：

子组件定义slot时、在标签上加上name="一号萝卜坑"属性
父组件将向插入的部分最外部分的div上加上slot="一号萝卜坑"属性

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 这是复用子组件的内容 -->
    <Son>
      <!-- 再组件里面去写给slot里面的东西 -->
      <h2 slot="slot1">这是传给第一个插槽的</h2>
      <h3 slot="slot2">这是传给第二个插槽的</h3>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";

export default {
    // 注册组件
  components: {
    Son,
  },
};
</script>

/src/views/son.vue(子组件)

<template>
  <div>
    <h2>我是子组件（为了复用）</h2>
    <!-- 第一个插槽 -->
    <slot name="slot1"></slot>
    <!-- 第二个插槽 -->
    <slot name="slot2"></slot>
  </div>
</template>

三、v-slot插槽

ps:因为slot和scope-slot在后续的vue3中彻底不在更新了，所以官方推荐我们使用v-slot

！！！注意注意：

v-slot只能添加到==< template>== 或自定义组件上
v-slot的简写方式是：==#==号

3.1 基本使用

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 这是复用子组件的内容 -->
    <!-- v-slot写在子组件里面 -->
    <Son v-slot:default>
      <!-- 再组件里面去写给slot里面的东西 -->
      <h2>这是v-slot默认</h2>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";

export default {
    // 注册组件
  components: {
    Son,
  },
};
</script>

/src/views/son.vue(子组件)

<template>
  <div>
    <h2>我是子组件（为了复用）</h2>
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

3.2 引入组件写入其他组件

思路：在父组件中、将一个工具人组件通过插槽插入到子组件中去

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 这是复用子组件的内容 -->
    <!-- v-slot写在子组件里面 -->
    <Son v-slot:default>
      <!-- 再组件里面去写给slot里面的东西 -->
      <h2>这是v-slot默认</h2>
      <utils></utils>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";
import utils from "./utils.vue";


export default {
    // 注册组件
  components: {
    Son,
    utils
  },
};
</script>

/src/views/utils.vue(工具人组件)

<template>
  <div>
    <!-- 我是一个被插入到son子组件的内容 -->
    <h4>我的名字叫工具人</h4>
  </div>
</template>

/src/views/son.vue(子组件)

<template>
  <div>
    <h2>我是子组件（为了复用）</h2>
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

3.3 v-slot具名插槽

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 这是子组件的内容 -->
    <Son>
        <template #header>
            <h2>这是头部插槽</h2>
        </template>
        <template #footer>
            <h2>这是底部插槽</h2>
        </template>
        <template #default>
            <h2>这是默认插槽</h2>
        </template>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";
export default {
    // 注册组件
  components: {
    Son,
  },
};
</script>

/src/views/son.vue(子组件)

<template>
  <div>
    <h2>我是子组件（为了复用）</h2>
    <!-- 头部插槽 -->
    <slot name="header"></slot>
    <!-- 底部插槽 -->
    <slot name="footer"></slot>
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>

3.4 插槽作用域

父组件的数据可以直接下发给插槽

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 这是子组件的内容 -->
    <Son>
        <template #default>
            {{name}}
        </template>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";
export default {
    // 注册组件
  components: {
    Son,
  },
  data() {
    return {
        name: 'im father message',
    };
  },
};
</script>

/src/views/son.vue(子组件)

只是在子组件中发了

<template>
  <div>
    <h2>我是子组件（为了复用）</h2>
    <!-- 头部插槽 -->
    <slot name="header"></slot>
    <!-- 底部插槽 -->
    <slot name="footer"></slot>
    <!-- 默认插槽 -->
    <slot></slot>
    
  </div>
</template>

3.5 通过插槽使用子组件的值

注意：

子组件声明：数据名、插槽名
父组件应用：#插槽名=“新建数据名”
父组件应用：#插槽名=“{数据名}”，支持解构
子组件传来的数据是{数据名：对应数据}

/src/views/father.vue(父组件)

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 这是子组件的内容 -->
    <Son>
      <!-- 插槽一自取名称 -->
      <!-- 对象{数据名称，对应数据} -->
      <template #slotname1="zjf">
        {{ zjf }}
      </template>
      <!-- 插槽二 使用解构取名字-->
      <!-- 对应数据 -->
      <template #slotname2="{slotdata2}">
        {{ slotdata2 }}
      </template>
    </Son>
  </div>
</template>

<script>
// 引入组件
import Son from "./son.vue";
export default {
  // 注册组件
  components: {
    Son,
  },
};
</script>

/src/views/son.vue(子组件)

<template>
  <div>
    <h2>我是子组件（为了复用）</h2>
    <!-- 插槽1 -->
    <slot :slotdata1="user1" name="slotname1"></slot>
    <hr />
    <!-- 插槽2 -->
    <slot :slotdata2="user2" name="slotname2"></slot>
  </div>
</template>

<script>
export default {
  // name: "slotfour",
  data() {
    return {
      user1: [
        { name: "Jack", sex: "boy" },
        { name: "Jone", sex: "girl" },
        { name: "Tom", sex: "boy" },
      ],
      user2: [
        { name: "Jack2", sex: "boy2" },
        { name: "Jone2", sex: "girl2" },
        { name: "Tom2", sex: "boy2" },
      ],
    };
  },
};
</script>