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

Question

在 vue2 中很简单：

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

扩展 + 创建实例。但在 vue3 中它已被删除。还有哪条路？

Answer 1

尝试扩展 Button 组件，然后将它的根元素 $el 附加到引用的 container:

import Button from 'Button.vue'


const CompB = {
  extends: Button
}

this.$refs.container.appendChild(CompB.$el)

Answer 2

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)

Answer 3

这对我有用，使用选项 API，在方法中创建一个组件


import { defineComponent } from "vue";


createComponent() {
var component = {
   data() {
      return {
         hello:'world',
      }
   },
   template:`<div>{{hello}}</div>`
}

var instance = defineComponent(component);

}

实例化后在模板中使用它

<component :is="instance" v-if="instance"/>

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

Vue3 Creating Component Instances Programmatically on button click

javascript

vue.js

vuejs3