# 如何在自定义插件中使用自定义组件

# 前提

在学习如何调试自定义插件之前,您需要知道:

  1. 自定义插件是基于 javascript 体系开发的

# 使用流程

1. 开发自定义组件

自定义组件名为 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>

plugin-senior-how-use-component-1

2. 开发 插件

export default {
    entry(context, field) {
        return field.api_name === 'name';
    },
    render(context, field) {
        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.setData(field.api_name, e.value);
                    }
                }
            }
        }).$mount().$el;
    }
}

3. 上传插件并进行调试。

plugin-senior-how-use-component-2

plugin-senior-how-use-component-3

lastUpdate: 6/27/2023, 2:46:14 PM