# 组件插槽
插槽指的是一个组件的可供扩展或可供替换的内容区域,实现原理基于 Vue Slot 的概念。不同组件提供的插槽内容不尽相同,甚至有些组件本身就是一个插槽,比如容器组件。插槽在设计器中不同的组件之间样式都是统一的,都是灰色背景并且提示 “拖拽组件或区块到这里”,如下图所示:

# 开启插槽
组件中的插槽需要开启才能使用。一些组件的插槽默认是开启的,如果没开启,或者想关闭某些插槽,可以在选中组件之后,在右侧属性选项卡中滑动到最底部,就能看到当前组件支持的插槽列表并且可以控制它们各自的开启状态。
例如,当我们选中复杂列表组件时,将显示组件提供的两个插槽,分别可以控制复杂列表顶部左右两边的扩展内容区的开启与否。

有些复杂组件可能包含内部组件,则需要鼠标点击选中内部组件才可以在属性选项卡中找到对应插槽,如复杂列表的列内容插槽需要选中复杂列表中的列表项才能显示和控制。

# 填充内容
开启了插槽之后,我们就可以往插槽中填充我们想要的内容了。
值的注意的是,当我们往插槽中填充完一个组件后,原有的插槽占位区域将消失,有人可能会误会一个插槽只能填充一个组件。但其实并没有这样的限制,我们可以再拖动一个组件到原来的插槽附近,这时设计器界面将显示组件的预览放置位置,松手就可以完成填充。

虽然一个插槽可以填充多个组件,但是如果对插槽内的多个组件有样式要求,建议还是先放置一个容器组件再放置多个组件,这样可以更好地控制组件样式。
# 插槽参数
部分组件的插槽会传递一些插槽参数给到填充的组件,用于获取上下文信息。
例如当我们扩展复杂列表的列内容插槽时,需要知道当前行和列的具体信息才能做具体内容的显示。例如我们拖一个简单的文本组件到列内容插槽中,如下图所示:

然后我们需要设置文本的内容为当前行的具体数据,就需要点击选中文本控件,然后点击文本属性的表达式绑定按钮。

在打开的表达式绑定弹窗中,我们可以看到插槽提供的上下文参数 tableCell。
