How to use Vue components in custom plugins

A plug-in is a carrier for controlling the system process. Components developed in the Vue framework can be used in the plug-in to encapsulate the functions and interactions of the fields. This article describes how to use Vue 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 Vue components

The file name is: 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. Develop plugins

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

3. Upload the plugin and debug it.