Javascript 将自定义模板渲染到Vue.js渲染函数中

是否可以从外部接收零件模板

如果有如下渲染函数：

var custom_form_modal = function ( context, custom_form ) {

  context.$Modal.info({
    render: (h) => {
      return h('div', {})
    }
  }）
... 

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="Name" prop="name">
        <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
    </FormItem>
    <FormItem label="E-mail" prop="mail">
        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
    </FormItem>
    <FormItem label="City" prop="city">
        <Select v-model="formValidate.city" placeholder="Select your city">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
        </Select>
    </FormItem>
</Form>

custem\u表单

如下所示：

var custom_form_modal = function ( context, custom_form ) {

  context.$Modal.info({
    render: (h) => {
      return h('div', {})
    }
  }）
... 

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="Name" prop="name">
        <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
    </FormItem>
    <FormItem label="E-mail" prop="mail">
        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
    </FormItem>
    <FormItem label="City" prop="city">
        <Select v-model="formValidate.city" placeholder="Select your city">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
        </Select>
    </FormItem>
</Form>

纽约
伦敦
悉尼

或者任何可以解释为表单的javascript类型

我想将其作为

自定义表单

，然后渲染到

div

（您可以看到

自定义表单模式

）

有没有办法实现这一点

---

编辑-1

我通过函数

custom\u form\u modal

呈现模板，然后我可以在按钮单击事件中显示模式，然后我不需要将代码写入调用vue文件的

。这是我的要求

最后，我阅读了，并找到了将其归档的解决方案：

var custom_form_modal = function (context,  custom_form_component ) {

  context.$Modal.info({
    render: (h) => {
      return h('div', {

      },[
        h(custom_form_component, { props: {} })
      ])
    }
  })
}

使用

自定义表单\u模式

：

import custom_form from '../components/combined_table/components/custom_form.vue'

  export default {

    methods: {
      handleStart() {
        Util.custom_form_modal(this, custom_form)
      }
    },
    components: {
      custom_form
    }
  };