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

Posted 2023-02-22

【中文标题】Vue3在按钮单击时以编程方式创建组件实例

【英文标题】：Vue3 Creating Component Instances Programmatically on button click

【发布时间】：2021-01-22 20:23:12

【问题描述】：

在 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 中它已被删除。还有什么办法？

【问题讨论】：

为什么要以这种方式（通过 DOM 操作）而不是标准的 Vue 习惯用法（即模板或渲染函数）来实例化组件？

@tony19 因为它只是一个例子，真正的生产方式等待后端答案并用后端数据渲染它

【参考方案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)

【讨论】：

我如何以编程方式v-bind:？我有type: var，但是当我更改var的值时，它不会更新

你能解释一下this.$refs.container.appendChild(div);中的this是什么吗？

这种情况下依赖注入不起作用

@Artemiy 您如何收听创建的“应用程序”上的事件以及当您不再需要它时如何销毁它？在 Vue 2 中，像 instance.$on('event', cb) 这样的东西是可能的，并且销毁一个简单的 instance.$destroy() 是可能的。你现在会怎么做？

@darkylmnx 请提出新问题，这与上述主题无关

【参考方案2】：

试试下面的代码：

import Button from 'Button.vue'


const CompB = 
  extends: Button


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

【讨论】：

请您提供更详细的答案。答案有点难理解