tools.js:

import Vue from 'vue'/*** @param Component 组件实例的选项对象* @param props 组件实例中的prop*/
export function create(Component, props) {const comp = new (Vue.extend(Component))({ propsData: props }).$mount()document.body.appendChild(comp.$el)comp.remove = () => {document.body.removeChild(comp.$el)comp.$destroy()}return comp
}

App.js:

<template><div class="m-feedback-out-wrap"><el-button @click="handleAdd">添加</el-button></div>
</template><script>
import { Feedback } from './feedback'
import { Button } from 'element-ui'
import { create } from './tools'
import './index.css'let feeback
export default {name: 'App',data() {return {}},components: {[Button.name]: Button,Feedback,},mounted() {this.handleAdd()},methods: {handleAdd() {if (feeback) {feeback.remove()}feeback = create(Feedback)},handleInit() {let node = document.getElementById('m-feedback')if (node) {node.parentNode.removeChild(node)}let newElement = document.createElement('div')newElement.id = 'm-feedback'newElement.innerHTML = 'Hello World'document.body.appendChild(newElement)},},
}
</script>

我开发的chatgpt项目：

https://chat.xutongbao.top/