基础语法

在 Vue 2 中，插槽（Slot）是一种用于在组件中进行内容分发的机制。它允许你在父组件中编写子组件的部分内容，以便在子组件中动态地插入不同的内容。

使用插槽的好处之一是提高了组件的可复用性和灵活性。父组件可以根据需要自定义子组件的部分内容，而无需修改子组件本身。

Vue 2 中的插槽有两种类型：具名插槽和默认插槽。

具名插槽（Named Slots）：

具名插槽允许你在子组件中通过特定名称来插入内容。

在父组件中，你可以使用<template>标签的 slot 属性，并指定一个名称。例如，<slot name="header"></slot> 表示一个具名插槽，名称为 "header"。

在子组件中，你可以使用 <template> 标签的 slot 元素，来占位插入父组件传递的具名插槽内容。例如，<slot name="header"></slot>。

默认插槽（Default Slot）：

默认插槽允许你在子组件中插入未命名的内容。如果父组件在使用子组件时不提供具名插槽的内容，那么将使用默认插槽来显示内容。

在子组件中，你可以使用 来定义默认插槽。

如何使用具名插槽和默认插槽：

父组件 ParentComponent.vue：

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent>
      <template v-slot:header>
        <h3>这是插入到具名插槽 header 的内容</h3>
      </template>
      <p>这是默认插槽的内容</p>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    
  components: {
    
    ChildComponent,
  },
};
</script>

子组件 ChildComponent.vue：

<template>
  <div>
    <h3>子组件</h3>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
    

};
</script>

在上面的示例中，父组件使用子组件<ChildComponent>并在其中传递了具名插槽和默认插槽的内容。

子组件中的<slot name="header"></slot> 表示具名插槽 "header"，它将显示父组件中通过<template v-slot:header>插入的内容。

而<slot></slot>表示默认插槽，它将显示父组件中没有被具名插槽占用的内容。

通过使用插槽，你可以在父组件中动态地插入子组件的部分内容，从而实现更灵活的组件复用和定制。

我的理解

在普通情况下，当父组件引用子组件时，子组件的标签内是不能包含其他内容的。但是通过使用插槽，父组件可以在子组件标签内写入内容，从而对子组件进行定制和扩展。

无论是具名插槽还是默认插槽，它们都是一种在父组件中对子组件进行修饰的机制。

具名插槽允许你在父组件中根据名称插入特定的内容。通过在子组件中定义具名插槽，并在父组件中使用<template v-slot:slotName>来填充内容，实现了父组件对子组件的定制。

默认插槽则是一个备用的插槽，当父组件没有为具名插槽提供内容时，将使用默认插槽来展示内容。这样，父组件可以在子组件标签内直接写入内容，作为默认插槽的内容。

使用插槽可以让父组件更加灵活地控制和定制子组件的部分内容，提高了组件的可复用性和扩展性。

实战

在 Vue 2 中使用插槽来创建一个可复用的模态框组件。

Modal.vue 组件：

<template>
  <div class="modal" v-if="show">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
    
  props: {
    
    show: {
    
      type: Boolean,
      default: false
    }
  }
};
</script>

<style>
.modal {
    
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
    
  background-color: #fff;
  padding: 20px;
}
</style>

在上述代码中，Modal.vue 是一个简单的模态框组件。它根据 show 属性来控制是否显示模态框。

模态框的内容是通过插槽 进行分发的。父组件在使用 组件时，可以在 标签内放置任意内容，作为模态框的内容。

现在，我们可以在父组件中使用 Modal 组件，并在其中定义模态框的内容。

App.vue 父组件：

<template>
  <div>
    <h2>父组件</h2>
    <button @click="showModal = true">打开模态框</button>
    <Modal :show="showModal">
      <h3>这是一个模态框标题</h3>
      <p>这是模态框的具体内容</p>
      <button @click="showModal = false">关闭模态框</button>
    </Modal>
  </div>
</template>

<script>
import Modal from './Modal.vue';

export default {
    
  components: {
    
    Modal
  },
  data() {
    
    return {
    
      showModal: false
    };
  }
};
</script>

在 App.vue 父组件中，我们引入了 Modal.vue 组件，并在 <Modal> 标签内放置了模态框的内容，包括标题和具体内容。通过 showModal 属性来控制模态框的显示或隐藏。

当点击 "打开模态框" 按钮时，showModal 状态会变为 true，从而显示模态框。模态框内的按钮点击事件可以修改 showModal 状态为 false，实现关闭模态框。

通过使用插槽，我们实现了一个可复用的模态框组件，父组件可以根据需要定制模态框的内容。

谢谢款待