Vue.js Vue3在按钮单击时以编程方式创建组件实例

<template>
 <button :class="type"><slot /></button>
</template>
<script>
 export default {
   name: 'Button',
   props: [ 'type' ],
 }
</script>

import Button from 'Button.vue'
import Vue from 'vue'

var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()

instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)

import {defineComponent,createApp} from 'vue'

buttonView = defineComponent({
    extends: Button, data() {
        return {
            type: "1111"
        }
    }
})

const div = document.createElement('div');
this.$refs.container.appendChild(div);
createApp(buttonView ).mount(div)

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空，没有从.nuxt复制任何内容

如何使用Nuxt 3动态处理无限嵌套路由？

vue3中的转换可以在滑入但不能滑出时工作

带 Bootstrap 的 Vue js，导航栏菜单不起作用

Vuetify/Vue3 插槽模板之间的阴影

为什么发送 POST API 请求时主体对象没有react ？

过渡如何在 Vue JS 3 中的图像上工作？

Vue 3 / Vuetify 3：如何为按钮设置全局默认 colored颜色

如何通过 setup() 发出多个参数？

在 dom 内移动 Vue 组件？

vuejs：将props传递给javascript中的组件？

在重复内容区域中添加

Vuetify - 如何保持第一个扩展面板默认打开，如果我打开另一个面板，其他面板应该关闭？

Vue路由保持活动和挂载行为

取消选中单选按钮

样式化 Vue 插槽

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

如何从 vue 组件调用 App.vue 中的方法

带有 Google Auth Signin 的 Vuejs 全局函数

表格行上的 Vuejs 转换