vue3中 slot使用

卡姿兰大眼猫&

已于 2024-07-05 08:58:34 修改

阅读量637

点赞数 20

文章标签：前端 vue

于 2024-07-03 17:14:38 首次发布

本文链接：https://blog.csdn.net/wj0712/article/details/140156371

版权

默认插槽：

这是最基本的插槽类型，当没有指定 name 属性时，插槽是默认插槽。

子组件：

<template>
  <div class="child">
    <h2>子组件内容</h2>
    <slot></slot> <!-- 默认插槽，插入父组件传递的内容 -->
  </div>
</template>

父组件：

<template>
  <ChildComponent>
    <p>这是插入到默认插槽的内容</p>
  </ChildComponent>
</template>

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

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

具名插槽：

具名插槽允许在组件中定义多个插槽，并在父组件中指定每个插槽的内容。

子组件 ChildComponent 定义了两个具名插槽：header 和 footer。
父组件通过 <template #header> 和 <template #footer> 向这些具名插槽传递内容。

子组件：

<template>
  <div class="child">
    <h2>子组件内容</h2>
    <slot name="header"></slot> <!-- 具名插槽 "header" -->
    <slot name="footer"></slot> <!-- 具名插槽 "footer" -->
  </div>
</template>

父组件：

<template>
  <ChildComponent>
    <template #header>
      <h3>这是插入到 header 插槽的内容</h3>
    </template>
    <template #footer>
      <p>这是插入到 footer 插槽的内容</p>
    </template>
  </ChildComponent>
</template>

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

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

作用域插槽：

作用域插槽允许子组件将数据传递给父组件，并由父组件决定如何渲染这些数据。

子组件 ChildComponent 使用作用域插槽向父组件传递 user 数据。
父组件通过解构 { user } 接收并使用这些数据来渲染内容。

子组件：

<template>
  <div class="child">
    <slot :user="user"></slot> <!-- 作用域插槽，传递 `user` 数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Alice', age: 25 }
    };
  }
};
</script>

父组件：

<template>
  <ChildComponent>
    <template #default="{ user }"> <!-- 接收子组件传递的 `user` 数据 -->
      <p>用户名: {{ user.name }}</p>
      <p>用户年龄: {{ user.age }}</p>
    </template>
  </ChildComponent>
</template>

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

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

动态插槽名：

动态插槽名允许根据运行时条件来决定使用哪个插槽。

子组件 ChildComponent 接收一个 dynamicSlot 属性，动态决定使用哪个插槽。
父组件可以通过改变 currentSlot 的值来切换显示的内容。

子组件：

<template>
  <div class="child">
    <slot :name="dynamicSlot"></slot> <!-- 动态插槽名 -->
  </div>
</template>

<script>
export default {
  props: ['dynamicSlot']
};
</script>

父组件：

<template>
  <ChildComponent :dynamicSlot="currentSlot">
    <template #slot1>
      <p>这是 slot1 的内容</p>
    </template>
    <template #slot2>
      <p>这是 slot2 的内容</p>
    </template>
  </ChildComponent>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      currentSlot: 'slot1' // 可以根据条件变更为 'slot2'
    };
  }
};
</script>

插槽默认类容：

如果父组件不提供内容，插槽可以显示默认内容。

如果父组件没有向 ChildComponent 的默认插槽传递任何内容，那么子组件将显示默认内容 “这是插槽的默认内容”。

子组件：

<template>
  <div class="child">
    <slot>这是插槽的默认内容</slot> <!-- 默认内容 -->
  </div>
</template>

父组件：

<template>
  <ChildComponent>
    <!-- 没有插入任何内容时，显示子组件定义的默认内容 -->
  </ChildComponent>
</template>

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

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