vue3的slot占位符

通过插槽来分配内容​:

一些情况下我们会希望能和 HTML 元素一样向组件中传递内容：


<AlertBox>
  Something bad happened.
</AlertBox>
我们期望能渲染成这样：

This is an Error for Demo Purposes

Something bad happened.

这可以通过 Vue 的自定义 <slot> 元素来实现：


<template>
  <div class="alert-box">
    <strong>This is an Error for Demo Purposes</strong>
    <slot />
  </div>
</template>

<style scoped>
.alert-box {
  /* ... */
}
</style>
如上所示，我们使用 <slot> 作为一个占位符，父组件传递进来的内容就会渲染在这里。



以上就是目前你需要了解的关于插槽的所有知识了。如果你看完本章节后还想知道更多细节，请深入阅读组件插槽章节。

原文:

组件基础 | Vue.js 通过插槽来分配内容