Slot插槽

插槽定义

        插槽（Slot）是vue.js组件中一种特殊的机制，用于在组件的模板中预留一些可变化的内容。 通过插槽，父组件可以将任意内容插入到子组件中指定的位置，从而增强了组件的灵活性和复用性。

插槽的分类

        插槽可以分为匿名插槽、具名插槽和作用域插槽

        1）匿名插槽

              匿名插槽是最简单的一种，用于传递未命名内容给子组件。

              示例代码：

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot>This is default content</slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <div>
    <parent-component>
      <p>This content will be inserted into the slot</p>
    </parent-component>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  }
};
</script>

        2）具名插槽   

               具名插槽允许你定义多个插槽，并给每一个插槽起一个名称

               示例代码：

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot name="header">Default header content</slot>
    <slot>This is default content</slot>
    <slot name="footer">Default footer content</slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <div>
    <parent-component>
      <template v-slot:header>
        <h1>Custom Header</h1>
      </template>
      <p>This content will be the default slot content</p>
      <template v-slot:footer>
        <footer>Custom Footer</footer>
      </template>
    </parent-component>
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  }
};
</script>

        3）作用域插槽

               作用域插槽允许子组件向父组件传递数据

               示例代码：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message">
      {{ message }}
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Child Component'
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component v-slot="{ message }">
      <p>{{ message }}</p>
    </child-component>
  </div>
</template>

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

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