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

插件是控制系统流程的载体，插件中可以使用Vue框架开发的组件来封装字段的功能和交互。该篇介绍如何在自定义插件中使用Vue组件。

前提

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

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

使用流程

1. 开发 Vue 组件

该文件名称为：name.vue

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

2. 开发 插件

import FieldName from './name.vue';
export default {
    entry(context, field) {
        return field.api_name === 'name';
    },
    render(context, field) {
        return new Vue({
            render(h) {
                return h(FieldName, {
                    on: {
                        change: this._onChange
                    }
                });
            },
            methods: {
                _onChange(val) {
                    alert(val);
                    context.setData(field.api_name, val);
                }
            }
        }).$mount().$el;
    }
}

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