Question

35

Vue3 Creating Component Instances Programmatically on button click

rated 0 times [ 38] [ 3] / answers: 1 / hits: 11537 / 4 Years ago, wed, october 7, 2020, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janjadonb

Add To Favorites

Follow

Total Points: 4

Total Questions: 114

Total Answers: 118

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

janjadonb questions

1 How to execute slickNext method in react-slick carousel?

Tue, Nov 10, 20, 00:00, 4 Years ago

1 How to set focus on custom input in ReactJS using useRef and react hooks?

Fri, Oct 23, 20, 00:00, 4 Years ago

1 React Router scroll page to the top after transition

Wed, Oct 14, 20, 00:00, 4 Years ago

1 How to create array of strings in VueJS?

Tue, Apr 14, 20, 00:00, 4 Years ago

1 ReferenceError: customElements is not defined

Thu, Mar 19, 20, 00:00, 4 Years ago

View All

answered 4 Years ago carrington · Accepted Answer

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)