# 自定义Component组件UI

一般情况下，开发者定义的Script Component会使用默认的UI样式，但是也可以使用自己定义的样式来实现。开发者可以用这个功能实现更方便使用的组件交互。

用户可以定义自己的Vue组件来构成对应的UI组件。Project窗口中，在Editor目录下，右键新建 >> Editor Plugin >> ComponentInspector，可以创建一个默认模版。

默认模板有一个.ts文件和一个.vue文件组成,在.ts文件中默认导出class的上面会有一个装饰器：@engine.decorators.CustomComponentInspector，通过这个装饰器给自定义Component组件UI命名进行注册

/**
 * customUI.ts
*/
import view from "./customUI_view"

@engine.decorators.CustomComponentInspector("customUI")
export default class customUI extends engine.Editor.UI.ComponentInspector {
  public vueObject = view
}

/**
 * customUI_view.vue
*/
<template>
  <h3>customUI</h3>
</template>
<script>
export default {
  name: 'customUI',
  // 默认会有这些入参
  props: {
    sd: {
      type: Object,
      required: true
    }
  },
  computed: {
    viewdata() {
      if (this.sd) {
        const vd = this.sd.getViewdata()
        return vd
      } else {
        return {}
      }
    }
  }
}
</script>
<style>
</style>

Script Component与自定义UI的关联 用户在自己定义的Script Component上面添加另一个装饰器：@engine.decorators.Inspector，表示在Inspector中的展示使用这个自定义UI。

@engine.decorators.Inspector("customUI")
@engine.decorators.serialize("customUI")
export default class customScriptComp extends engine.Script {...}

下图为对customScriptComp使用自定义Component组件UI进行展示的效果

SerializedData，这个UI组件的入参有一个sd，这是一个serializedData数据。他是一个对小游戏Script Component的处理类，用来生成对应的序列化数据。sd.getViewData()可以获取到工具默认对Script Component里面定义的@property数据的序列化处理，然后开发者可以将数据绑定到自定的vue组件上面。数据与UI是单向绑定的，随着游戏中的component数据不停变更，sd的viewdata数据也会变化，那么界面也会自动同步更新。开发者也可以定义自己的SerializedData，不是用默认的处理逻辑。在任何一个Editor目录下右键新建 >> Editor Plugin >> SerializedData，会创建一个SerializedData类型，然后通过定义update方法，来自定义viewdata是如何生成的。

@engine.decorators.SerializedData('CustomSD')
export class CustomSD {...}

@engine.decorators.Inspector("customUI")
@engine.decorators.UseSerializedData("CustomSD")
@engine.decorators.serialize("customUI")
export default class customScriptComp extends engine.Script {...}

修改数据，如果想要通过UI去修改Script Component中的数据，只要获取SerializedData中的targets属性，就可以拿到对应的Script Component实例，从而直接对其进行修改或是调用。当targets属性变化的时候，SerializedData会识别到，并且更新到viewData中。整体保证一个单向的数据变更流。