简体   繁体   中英

Render custom template into Vue.js render function

Can Vue render function receive part template from outer?

If there is a render function like bellow:

var custom_form_modal = function ( context, custom_form ) {

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

the custem_form such as like bellow:

<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>

or whatever the javascript-type that can explain as a form.

I want put it as the custom_form , and then render into the div (you see the custom_form_modal ).

Is there a way to realize this?


EDIT-1

I render the template by the function custom_form_modal , then I can show the modal in a button click event, then I do not need write code into the invoking vue file's <template> . This is my requirement.

Finally, I read the document , and found the solution to archive it:

var custom_form_modal = function (context,  custom_form_component ) {

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

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

use the custom_form_modal :

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
    }
  };

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM