Vue 3 .vue文件的新实例

Question

在vue 2中，我可以轻松地创建一个实例: let vueTemplate =vueTemplate()；

而且会成功的。但在vue 3不起作用。

这是Vue 2中的代码，我可以访问一个新实例：

import template from './edit-text-field.vue';

export default class EditTextFieldInitializer {
    public static InitEditTextField(config: EditTextFieldConfig) {
     // VueConstructor
     let vueTemplate = new template(); // How can i do the same in vue 3 ?
     vueTemplate .$mount(config.element);
  }
}

错误：

Uncaught TypeError: _edit_text_field_vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

我的templete vue文件：

<template>
    <el-form :model="form" :rules="rules" ref="form" label-width="0px"
             @submit.prevent
             @validate="onValidate"
             class="gantt-text-field-edit-form"
             v-loading="isLoading">
        <el-form-item prop="value">
            <el-popover placement="bottom"
                        v-model="isPopoverVisible"
                        width="200"
                        trigger="manual"
                        :content="errorMessage">
                                      <template #reference>
                <el-input  ref="input" @blur="submitForm"
                          :placeholder="$l('PleaseEnterValue')" v-model="form.value"></el-input>
                                        </template>
            </el-popover>

        </el-form-item>

    </el-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
        name: 'edit-text-field',
        data: () => {
            return {
                isPopoverVisible: false,
                isGettingErrorMsg: false,
                errorMessage: null,
                isFormSubmited: false,
                isLoading: false,
                form: {
                    value: null
                },
                rules: {

                },
                onValueChanged: null,
                onEditModeExit: null

            }
        },
        methods: {
            onChanged(value) {
                this.submitForm();
            },
            setData(data) {
                this.form = data.form;
                this.rules = data.rules;
                this.onValueChanged = data.onValueChanged;
                this.onEditModeExit = data.onEditModeExit;
            },
            onBlur() {
                this.$beforeUnmount();
                this.$data.onEditModeExit();
            },
            processInput(event: any): void {
                if (event.keyCode === 13) {
                    this.submitForm();
                }
            },
            processEscButtonPress(event: any): void {
                //esc button
                if (event.keyCode === 27) {
                    this.onBlur();
                }
            },
            submitForm() {
                let component: any = this;
                if (component.$data.isFormSubmited)
                    return;
                component.$data.isFormSubmited = true;
                component.$refs.form.validate((valid) => {
                    if (valid) {
                        component.setFormValid();
                        var promise = component.$data.onValueChanged(component.$data.form.value);
                        if (promise == null) {
                            component.onBlur();
                            component.$data.isFormSubmited = false;
                        } else {
                            component.$data.isLoading = true;
                            promise.then(() => {
                                component.$data.isFormSubmited = false;
                                component.$data.isLoading = false;
                                component.onBlur();
                            });
                        }
                        return true;

                    } else {
                        component.setFormInvalid();
                        component.$data.isFormSubmited = false;
                        return false;
                    }
                });
            },
            onValidate(name: string, isValid: boolean) {
                let component: any = this;

                if (this.$data.isGettingErrorMsg == true) {
                    this.$data.isGettingErrorMsg = false;
                    return;
                }
                if (isValid) {
                    this.setFormValid();
                } else {
                    component.$refs.form.validateField(name, (msg) => {
                        this.$data.isGettingErrorMsg = true;
                        this.$data.errorMessage = msg;
                        this.setFormInvalid();
                    });
                }
            },
            setFormValid() {
                let component: any = this;
                this.$data.isPopoverVisible = false;
                component.$refs.form.$el.classList.add('valid');
            },
            setFormInvalid() {
                let component: any = this;
                this.$data.isPopoverVisible = true;
                component.$refs.form.$el.classList.remove('valid');
                component.$refs.input.focus();
            }
        },
        // created() {
        //     debugger
        //     // alert("Created - Not a bug - If you still see this message - I'm working on it.")
        // },
        mounted() {
            debugger
            let component: any = this;
            component.setFormValid();
            component.$refs.input.$el.addEventListener('keypress', component.processInput);
            component.$refs.input.$el.addEventListener('keydown', component.processEscButtonPress);
            component.$refs.input.focus();
        },
        beforeUnmount() {
            this.$data.isPopoverVisible = false;
        }
    });
</script>

        const vueTemplate:any = createApp(template);
        const instance = vueTemplate.mount(config.element); // Breaking here
        // Uncaught TypeError: Cannot read property 'created' of undefined
        // and error:
        // Error: [Vue warn]: Failed to resolve component: el-input 
        //at <EditTextField>
        instance.$data.onValueChanged = config.onValueChanged;
        instance.$data.onEditModeExit = config.onEditModeExit;
        instance.$data.rules = config.validationRules;

配置：

element: div.pointer.gantt-grid-value
onEditModeExit: ƒ ()
onValueChanged: ƒ (newValue)
validationRules: {value: Array(2)}
value: "0"
__proto__: Object

没有工作：import EditTextField from './edit-text-field.vue';，它在这一行中中断了，createApp(EditTextField).mount(config.element); config.element : is元素:div.pointer.gantt-格栅值(dom中的元素)

错误：

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve directive: loading 
  at <EditTextField>

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: el-popover 
  at <EditTextField>

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: el-form-item 
  at <EditTextField>

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: el-form 
  at <EditTextField>

runtime-core.esm-bundler.js?5c40:2911 Uncaught TypeError: Cannot read property 'created' of undefined
    at invokeDirectiveHook (runtime-core.esm-bundler.js?5c40:2911)
    at mountElement (runtime-core.esm-bundler.js?5c40:3853)
    at processElement (runtime-core.esm-bundler.js?5c40:3822)
    at patch (runtime-core.esm-bundler.js?5c40:3742)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4243)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4208)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4167)
    at processComponent (runtime-core.esm-bundler.js?5c40:4127)
    at patch (runtime-core.esm-bundler.js?5c40:3745)
    at render (runtime-core.esm-bundler.js?5c40:4828)
    at mount (runtime-core.esm-bundler.js?5c40:3046)
    at Object.app.mount (runtime-dom.esm-bundler.js?830f:1234)
    at Function.EditTextFieldInitializer.InitEditTextField (edit-text-field.ts?b6bf:15)
    at Object.GanttInstance.editProgessValue (gantt-tab.ts?3a72:701)

FallowUp：

createApp(EditTextField).mount(config.element)

它不能解析模板中的html元素，比如el-form项和上面的html错误。

• 创建一个新的应用程序，我不能使用我的main.ts应用程序

这个代码在某种程度上起作用了。但问题是:我需要再次添加所有进口产品，以使其正常运行。edit-text-field.ts

import template from './edit-text-field.vue';
import ElementPlus from 'element-plus';
import locale from "element-plus/lib/locale/lang/ru";
import { VueLocalizationPlugin } from "@/helpers/localization";

const comp = createApp(template);
        debugger
        comp.use(ElementPlus, { locale, size: "mini" }).use(VueLocalizationPlugin);

这不是像vue 2那样好的解决方案

Answer 1

若要创建组件实例，请在组件定义上使用createApp()，并在HTML元素上使用mount()：

import { createApp } from 'vue'
import MyComponent from '@/components/MyComponent.vue'

//...

let vueTemplate = createApp(MyComponent).mount(config.element)

演示(简单)

演示(带有元素UI)