Vue3 Creating Component Instances Programmatically on button click

Question

In vue2 it was be easy:

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

extend + create instance. But in vue3 it's has been deleted. Where are another way?

Answer 1

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 2

This works for me, using options API, in a method create a component

import { defineComponent } from "vue";


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

var instance = defineComponent(component);

}

Use it within your template once you've instantiated it

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

Answer 3

Try out to extend the Button component and then append it root element $el to the referenced container:

import Button from 'Button.vue'


const CompB = {
  extends: Button
}

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