Vue 中 vue slot？

Vue 的插槽（Slot）是一种机制，允许你在父组件中向子组件传递内容，使得子组件的部分内容能够由父组件决定。

默认插槽（Default Slot）

默认插槽是最简单的插槽形式，用于将父组件的内容传递给子组件的特定位置。

子组件（ChildComponent.vue）：

<template>
  <div>
    <slot></slot>
    <!-- 这里的内容会被替换为父组件传入的内容 -->
  </div>
</template>

父组件中使用子组件：

<template>
  <div>
    <ChildComponent>
      <!-- 这里的内容会替换子组件中的默认插槽 -->
      <p>This is some content passed from the parent.</p>
    </ChildComponent>
  </div>
</template>

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

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

具名插槽（Named Slot）

具名插槽允许你在子组件中定义多个插槽，并在父组件中根据名字分发内容。

子组件（ChildComponent.vue）：

<template>
  <div>
    <header>
      <slot name="header"></slot>
      <!-- 这里会接收名为 "header" 的插槽内容 -->
    </header>
    <main>
      <slot></slot>
      <!-- 这里会接收默认插槽或者没有具名插槽的内容 -->
    </main>
    <footer>
      <slot name="footer"></slot>
      <!-- 这里会接收名为 "footer" 的插槽内容 -->
    </footer>
  </div>
</template>

父组件中使用子组件：

<template>
  <div>
    <ChildComponent>
      <!-- 分发到默认插槽 -->
      <p>This is some default content passed from the parent.</p>

      <!-- 分发到名为 "header" 的插槽 -->
      <template v-slot:header>
        <h1>Header content from the parent.</h1>
      </template>

      <!-- 分发到名为 "footer" 的插槽 -->
      <template v-slot:footer>
        <footer>Footer content from the parent.</footer>
      </template>
    </ChildComponent>
  </div>
</template>

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

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

通过插槽机制，Vue 提供了一种灵活的方式，让父组件能够向子组件传递内容，并且允许子组件灵活地展示这些内容。

Was this helpful?

YesNo

0 / 0