开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情

说点题外话

这一篇会先说说插槽在选项式中的使用

说正文

一、基本介绍

Vue.js是一种流行的JavaScript框架，它允许您构建交互式用户界面。Vue.js 2.x版本中的插槽是一个非常有用的功能，它允许您在组件的模板中定义可重用的内容块。这些块可以由父组件动态地填充，从而提供了更灵活的模板组合方式。

在Vue.js 2.x中，插槽有两种类型：命名插槽和默认插槽。

1. 默认插槽

默认插槽是最简单的插槽类型。它允许您在组件的模板中定义一个占位符，该占位符将由父组件动态地填充。在组件模板中，您可以使用特殊的语法来定义默认插槽

<slot></slot>

当组件被渲染时，这个占位符将被替换为父组件提供的内容。这个代码实际上就相当于一个占位符，将我们需要在这个位置插入的东西提前占个位置

比如我们有一个组件Home, 但是组件内容是由传入的值决定的。也就是说我们需要在Home组件中使用<slot></slot>这个代码进行占位，将App.vue组件需要传入的值插入在<slot></slot>这里（这是vue帮我们做的事情）

App.vue

<template>
  <div>
    <home>
      <h2>我是App组件传入的值</h2>
    </home>
  </div>
</template>

<script>
import Home from './Home.vue';
  export default {
    components: { Home }
  }
</script>

Home.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    
  }
</script>

看到这里有人会问，我们可不可以不传值的时候有一个默认值呢？当然可以。我们只需要在<slot></slot>中写入我们的默认值即可。

Home.vue

    <slot>
      <i>我是默认插槽的内容</i>
    </slot>

还有一个问题，如果我们在App组件内多次使用Home组件呢，是重复展示还是会替代上一个内容的

App.vue

    <home>
      <h2>我是App组件传入的值</h2>
      <h2>我是App组件传入的值</h2>
      <h2>我是App组件传入的值</h2>
    </home>

从打印的结果来看，当我们在组件中多次调用一个组件并传入值之后，插槽会将所有信息都展示出来

结束

关于对插槽的基本使用就先说到这里，下一篇说选项式的具名插槽

和vue3和解的Day20--插槽1

说点题外话

说正文

一、基本介绍

1. 默认插槽

结束