列表 ​

list 组件用于渲染被嵌套的子元素，类似于 v-for

它的使用场景有很多，比如下拉列表、单选按钮组、多选按钮组、折叠面板、列表等等。

可以通过两种方式给list组件指定绑定的数据：接口返回和手动指定。

它的每一个子组件都可以通过作用域获取到对应数组项的值。

示例: 使用手动指定数据渲染一个 select下拉选项

1. 页面中拖入一个select组件，这时它有一个默认的选项：

2. 找到属性面板中的插槽，可以看到它的默认插槽中有一个元素，也就是option选项

现在点击[删除]，来删除掉这个默认插槽：

这时下拉框就没有了选项：

3. 点击默认插槽中的[添加]，然后选中组件面板中的列表组件

这样list组件就被添加到了下拉框组件中

4. 在列表组件的属性面板中配置【手动指定数据】编写代码并保存。

[
  {
    id: 1,
    name: '男'
  },
  {
    id: 0,
    name: '女'
  },
  {
    id: -1,
    name: '保密'
  }
]

[
  {
    id: 1,
    name: '男'
  },
  {
    id: 0,
    name: '女'
  },
  {
    id: -1,
    name: '保密'
  }
]

5. 在list组件属性面板中给 default 插槽添加一个option组件。在右侧的属性面板中通过#绑定lable及value

这样就通过列表渲染出一个具有三个选项的下拉框，使用#来获取到了作用域中的值。

6. 回到下拉框，我们给它做一个数据绑定：

现在选中一个下拉选项，就能看它绑定的数据变化：

list组件可以被添加到任意组件的任意插槽中，也可以在他的默认插槽中添加任意数量的任意组件。

子组件使用#可以获取到list组件作用域对象，从而访问其中的值。