7. 自定义属性面板（4）组件或组件数组选择

视频介绍

山海鲸系列二次开发教程：组件和组件数组的自定义属性面板
大家好，欢迎大家回到山海鲸系列的二次开发教程。我们上一节课讲了上传文件这样一个自定义的组件属性面板。那么今天，我们讲一下组件和组件数组这样的一个自定义属性面板。

我们很多时候，比如说在给组件写 RK 时，它可能会依赖其他组件的一些设置项。那这个时候，我们怎么去在这个组件中拿到其他组件呢？我们可以通过很多种方式，其中最简单的一种方式就是通过组件的属性面板。

我们还是打开我们的文档，先看一下组件属性面板的定义方式。element.empty，注意，这个是没有办法去设置其它东西了，因为它就是一个数组或者下拉框的一个选择。element_array 就是组件数组，element 就是单个组件，它们两个是非常相似的。无非就是我们 get 出来的这个 setting 的内容，一个是数组，一个是单个组件。

我们单个组件，它就是我们的 element，我们前面说了，就是我们 extension 上 list 的 element。而我们通过组件数组拿到的也是 element，只不过是选中的那个 element。

好，我们先来试一下这样的一个功能。我们同样的，就用这个文本框，然后点击编辑。我们找一下这个 element 的这样的一个自定义属性在哪里。在这里，我们把它注释掉，我们刷新一下，这样就出来了个 element。我们下拉就可以看到，它可以选择目前整个组件当中所有的元素，不仅仅是二维元素，三维元素也是可以选择的。可以看到这是三维元素中的一些东西。

好，我们先选择一个，假设我们就选择这个图片组件，我们选择它，保存一下。那么选择之后，我们该怎么去获取到这个图片组件呢？很简单，我们同样的在这样的一个变化后（如果它变化之后），看一下，我们先打印一下 this.debug14。好，我们看一下拿到的这个 element，实际上是可以直接拿到它的 name 的。我们看一下它的 name，name 就是这一侧会显示名字，所以它应该打印出的是图片。当然我们这里还没有变化，我们保存一下，变一下，我们先关掉，然后再选择图片。

好，可以看到它打印出来的就是图片了。那我除了能拿到这个 element 的方法以外，我还能做什么呢？实际上我们在 element 上的所有的方法，都是可以调用的。我是可以给 element 去 getOption 或者 setOption 的。也就是说，我这个时候绑定的是在这个组件上，但我却可以 set 和 get 这个组件的 option，这个也是很方便的。就所有的，我本来在这个组件上能做的事情，我现在通过一个引用，相当于我都可以对它进行设置了。

好，这是一方面，我们可以设置这图片组件的所有的 option。比如说，我们来拿一下图片组件的这个调用代码实例的组件位置。我们在这边当它变化了之后，我们可以拿一下它的 option，我们获取一下这个组件的（这是一个 get set），我们把它获取一下。这个组件的 get 刚刚复制错，我们手动把它改掉了。改掉之后我可以打印一下这个值，x:" + x + ",y:" + y。

OK，我们这次再试一下这个。我们把代码刷新一下，让我们先关掉重新选。重新选，sorry sorry，这选错了，我们保留回去，应该是它的。我们先叉掉它刷新一下，然后我们选择图片。OK，可以看到我这打出 x 是 321，y 是 278。我们这里再检查一下，这里你看我就写错了，这里一定要注意一下，我这写的是我们直接拷过来的，是关于它自己组件的，所以我们打出来的呢，也是它自己组件的位置 321,218。我们这个图片这个组件的位置是什么，是 135,3168。我们这里不能用 this.element，因为我们是绑定在这个 debug14 上的，我们用 this.debug14 就可以。我们回到这个刷新一下，叉掉重新选一下。好，我们可以看到这次，它的 XY 就答对了。

除了我们能拿到这个它自己的 getOption、setOption，我们还可以拿到在这个组件上已经挂载的我们的二开代码的类。这个方法是什么呢？我们回到我们的这个文档当中，我们看到 element 往下走，在这里有一个叫 getExtensionInstance 和 getExtensionInstances，这都是 4.2 之后开始支持的。instance 就是所有扩展的第一个实例，instances 就是所有扩展的所有实例。一般来说，为什么没有这个方法，就是因为一般来说，我们就只有一个二开代码类，那我们就只用 getExtensionInstance。

那我们在这里看一下，假设我在下面拿一下它的 extension：this.de