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.
Advertisement
Answer
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 } };