Vue 编程式添加组件

标准题解

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

正常情况下添加组件

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

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

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

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

其他参考代码

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');

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

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

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 的

后记

有一些不错的参考