How to use custom components in custom plugins

premise

Before learning how to debug custom plugins, you need to know:

1. The custom plug-in is developed based on the javascript system

manual

1. Develop custom components

The custom component is named component_plugin__c

<template>
   <div>
       这是自定义组件
       <input type="text" @change="_change">
   </div>
</template>
<script>
   export default {
       methods: {
           _change(e) {
               this.$emit('change', e.target.value);
           }
       }
   }
</script>

2. Develop plugins

export default {
   entry(context, field) {
       return field.api_name === 'name';
   },
   render(context) {
       return new Vue({
           components: {
               AsyncComponent: FxUI.component.get('AsyncComponent')
           },
           render(h) {
   			return h('AsyncComponent', {
                   props: {
                       apiName: 'component_plugin__c'
                   },
                   on: {
                       action: this._doAction
                   }
               });
   		},
           methods: {
               _doAction(e) {
                   if(e.type === 'change') {
                       alert(e.value);
                       context.setValue(e.value);
                   }
               }
           }
       }).$mount().$el;
   }
}

3. Upload the plugin and debug it.