超级详细Vue插槽slot具体使用方法

Vue的插槽有三种，下面来一一介绍

一、默认插槽

默认插槽的使用很简单。把Student组件为被使用组件，App组件为使用组件，及引入Student组件的组件。

使用方法：想要在Student组件中插入如下的h1标签内的内容。在App组件中的用法;在App组件的Student标签里写入要插入的标签。

<template>
  <div id="app">
    <!-- 默认插槽 -->
    <Student>
      <!-- 想要在Studetn组件中插入如下代码 -->
      <h1>我想插入到Student组件中</h1>
    </Student>
  </div>
</template>

<script>
import Student from "./components/Student.vue";
export default {
  name: "app",
  components: { Student },
};
</script>

<style>
p {
  margin-top: 20px;
}
</style>

在Student组件中，使用slot标签来占位，也就是说，在slot标签的位置处会插入上面App组件上<Student>标签中的内容。

<template>
  <div id="student">
    <h1>下面是App组件插入的内容</h1>
    <slot></slot>
  </div>
</template>