# Slot
在某些场合，我们希望使用和小程序UI组件一致的slot能力来做一些灵活的封装，解决复用。xr-frame同样支持slot，但在具体的用法上用一些限制，下面就让我们通过一个例子教大家使用。
# 定义包含slot的组件
首先我们需要定义一个能插入slot的组件，这个传统小程序区别不大，但注意组件配置的renderer一定要是xr-frame：
<xr-scene bind:ready="handleReady">
<xr-light type="ambient" color="1 1 1" intensity="1" />
<xr-light type="directional" rotation="40 70 0" color="1 1 1" intensity="3" cast-shadow />
<slot></slot>
<xr-node node-id="target"></xr-node>
<xr-camera node-id="camera" clear-color="0.4 0.8 0.6 1" position="0 0 4" target="target" />
</xr-scene>
# 定义要插入slot的组件
接下来我们便可以定义要插入的组件，同样需要指定renderer为xr-frame，但注意因为是作为slot并且受到一个页面只能存在一个xr-scene的约束，所以我们不能将此组件的根节点定义为xr-scene：
<xr-node>
<xr-mesh geometry="cube" scale="0.5 0.5 0.5" position="1 0 0" />
<xr-mesh geometry="sphere" scale="0.5 0.5 0.5" position="-1 0 0" />
</xr-node>
这里我定义了两个mesh，准备将其插入到第一个组件定义的场景中。
# 用一个xr组件使用二者
这一步是和传统小程序差别最大的，我们不能直接在page中使用slot，而是需要再新建一个xr-frame组件将二者包装起来。
首先创建一个xr-frame组件，定义其json配置，这里一定要注意组件的名字不能是xr-类型的，否则会走到原生组件。这里命名xrTest为定义了slot的组件，xrSlot是要插入的组件：
{
"component": true,
"renderer": "xr-frame",
"usingComponents": {
"xrTest": "../../components/xr-test/index",
"xrSlot": "../../components/xr-slot/index"
}
}
然后在xml中使用它：
<xrTest>
<xrSlot />
</xrTest>
当然，你也可以不将要插入到slot中的内容定义为组件而是直接写xr-frame原生组件，比如：
<xrTest>
<xr-node>
<xr-mesh geometry="cube" scale="0.5 0.5 0.5" position="1 0 0" />
<xr-mesh geometry="sphere" scale="0.5 0.5 0.5" position="-1 0 0" />
</xr-node>
</xrTest>
# 在页面中使用这个xr组件
最后一步就是使用最顶层的这个组件了，正常引入使用即可（这里命名为xr-test-slot）：
<view>
<xr-test-slot
disable-scroll
id="main-frame"
width="{{renderWidth}}"
height="{{renderHeight}}"
style="width:{{width}}px;height:{{height}}px;"
/>
</view>