Can Vue render function receive part template from outer?
If there is a render function like bellow:
JavaScript
x
9
1
var custom_form_modal = function ( context, custom_form ) {
2
3
context.$Modal.info({
4
render: (h) => {
5
return h('div', {})
6
}
7
})
8
9
the custem_form
such as like bellow:
JavaScript
1
16
16
1
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
2
<FormItem label="Name" prop="name">
3
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
4
</FormItem>
5
<FormItem label="E-mail" prop="mail">
6
<Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
7
</FormItem>
8
<FormItem label="City" prop="city">
9
<Select v-model="formValidate.city" placeholder="Select your city">
10
<Option value="beijing">New York</Option>
11
<Option value="shanghai">London</Option>
12
<Option value="shenzhen">Sydney</Option>
13
</Select>
14
</FormItem>
15
</Form>
16
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:
JavaScript
1
13
13
1
var custom_form_modal = function (context, custom_form_component ) {
2
3
context.$Modal.info({
4
render: (h) => {
5
return h('div', {
6
7
},[
8
h(custom_form_component, { props: {} })
9
])
10
}
11
})
12
}
13
use the custom_form_modal
:
JavaScript
1
14
14
1
import custom_form from '../components/combined_table/components/custom_form.vue'
2
3
export default {
4
5
methods: {
6
handleStart() {
7
Util.custom_form_modal(this, custom_form)
8
}
9
},
10
components: {
11
custom_form
12
}
13
};
14