Slots

组件提供一个默认插槽用于承载内容。插槽内容会铺满矩形区域、随宽高/位置/旋转一同变换。

基本用法

<vdr :w="200" :h="200">
  <div>I am the slot content</div>
</vdr>

嵌入图片

<vdr :w="300" :h="200">
  <img src="/cat.jpg" style="width:100%;height:100%;object-fit:cover" />
</vdr>

或直接使用 bg prop：

<vdr :w="300" :h="200" bg="/cat.jpg" />

插槽中嵌套另一个 vdr

插槽里可以再放一个 <vdr>，用于自由嵌套（不通过 childrens）：

<vdr :w="320" :h="220" :x="30" :y="30">
  <vdr :w="140" :h="100" :x="40" :y="40">
    <div>child via slot</div>
  </vdr>
</vdr>

💡 何时用 slot 嵌套，何时用 childrens？

• 数据结构是递归数据（如树形 Schema、JSON 配置）→ 用 childrens
• 数据结构是模板组合（每层手写一段 template）→ 用 slot