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

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

這對我有用，使用選項 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"/>

Answer 3

當我從 Element UI 遷移到 Element Plus 時，我不得不將前綴/后綴圖標作為組件傳遞，而不是作為類名字符串傳遞。 但是我使用單個自定義圖標組件，我必須首先創建一個 vnode 並使用道具對其進行自定義，然后將其作為圖標道具傳遞。

所以我創建了一個插件：

import { createVNode, getCurrentInstance } from 'vue'

export const createComponent = (component, props) => {
  try {
    if (component?.constructor === String) {
      const instance = getCurrentInstance()
      return createVNode(instance.appContext.components[component], props)
    } else {
      return createVNode(component, props)
    }
  } catch (err) {
    console.error('Unable to create VNode', component, props, err)
  }
}

export default {
  install(APP) {
    APP.$createComponent = createComponent
    APP.config.globalProperties.$createComponent = createComponent
  }
}

然后我可以像這樣將它用於全局注冊的組件：

<component :is="$createComponent('my-global-component', { myProp1: 'myValue1', myProp2: 'myValue2' })" />

對於本地進口的組件：

<component :is="$createComponent(MyComponent, { foo: 'bar' }) />

或者

data() {
  return {
    customComponent: $createComponent(MyComponent, { foo: 'bar' })
  }
}

<template>
  <component :is="customComponent" />
  <MyOtherComponent :customizedComponent="customComponent" />
</template>

Answer 4

嘗試擴展 Button 組件，然后將其根元素$el附加到引用的container ：

import Button from 'Button.vue'


const CompB = {
  extends: Button
}

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