0%

Vue 编程式添加组件

标准题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Button from 'Button.vue';
import Vue from 'vue';

const ComponentClass = Vue.extend(Button);
const instance = new ComponentClass({
propsData: {
fieldName: id, // << primitive
editable: true, // << primitive
signatureType: signatureType, // << primitive
signatureIndex: length - 1, // << primitive
createdSignature: this.createdSignature, // << reactive object, updates to the child when changed
},
});

instance.$mount();
this.$refs.container.appendChild(instance.$el);

正常情况下添加组件

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue';
import App from './App.vue';

// 指定 el
new Vue({
el: '#app',
render: (h) => h(App),
});

// 使用 #mount 方式
new Vue({
render: (h) => h(App),
}).$mount('#app');

Vue.extend

1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import Modal from './Modal.vue';

// 生成 Modal 实例
const ModalComponent = Vue.extend(Modal);
// 手动渲染
const component = new ModalComponent().$mount();
// 挂载到 body 下面
document.body.appendChild(component.$el);

Render 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue';
import Modal from './Modal.vue';

const props = {}; // 这里可以传入一些组件的 props 选项
// 生成 Modal 实例
const Instance = new Vue({
render(h) {
return h(Modal, {
props: props,
});
},
});
// 手动渲染
const component = Instance.$mount();
// 挂载到 body 下面
document.body.appendChild(component.$el);

原生 JS 创建的的 Dom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue';
import Modal from './Modal.vue';

// 指定 container
const containerDivEl = document.createElement('div');
document.body.appendChild(containerDivEl);
const props = {}; // 这里可以传入一些组件的 props 选项
// 生成 Modal 实例
const Instance = new Vue({
el: containerDivEl,
render(h) {
return h(Modal, {
props: props,
});
},
});

其他参考代码

1
2
3
4
5
6
7
8
9
10
11
12
const Hello = {
props: ['text'],
template: '<div>{{ text }}</div>',
};

// create component constructor
const HelloCtor = Vue.extend(Hello);
const vm = new HelloCtor({
propsData: {
text: 'HI :)',
},
}).$mount('#mount');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<v-app>
<v-btn @click="addTable" color="red">Generate Data-Table</v-btn>
<hr />
<v-btn @click="addCard">Generate simple Card</v-btn>
<v-container ref="mainContainer"></v-container>
</v-app>
</template>

<script>
import Table from './Table.vue';
import Card from './Card.vue';
import Vue from 'vue';
import vuetify from '../plugins/vuetify';

export default {
name: 'mainWindow',
components: { Table, Card },
methods: {
addTable() {
var ComponentClass = Vue.extend(Table);
var instance = new ComponentClass({ vuetify });
instance.$mount();
this.$refs.mainContainer.appendChild(instance.$el);
},
addCard() {
var ComponentClass = Vue.extend(Card);
var instance = new ComponentClass({});
instance.$mount();
this.$refs.mainContainer.appendChild(instance.$el);
},
},
};
</script>

<style></style>
1
2
3
4
5
6
7
8
9
10
const SignaturePadInstance = new SignaturePadClass({
parent: this,
propsData: {
fieldName: id, // << primitive
editable: true, // << primitive
signatureType: signatureType, // << primitive
signatureIndex: length - 1, // << primitive
createdSignature: this.createdSignature, // << reactive object, updates to the child when changed
},
});
1
2
3
4
5
6
7
8
9
Vue.component('my-comp', {
props: ['map','key'],
computed: { input: function() { return this.map[this.key] } },
watch: { input: function(a, b) {...} }, // triggered on map[key] change
});

new (Vue.component('my-comp'))({
propsData: { map:theMap, key:theKey }, // theMap must be reactive
});

还有个VUE3的

后记

有一些不错的参考