工具函数创建组件实例

工具函数说明

为了实现组件实例的创建与管理，我们编写了一个工具函数 create，该函数负责根据传入的组件类和属性参数，创建一个新的 Vue 实例，并将其挂载至页面中。

工具函数实现步骤

创建 Vue 实例：使用 Vue 框架创建一个新的实例，并配置其渲染逻辑

渲染组件：通过 render 函数，将传入的组件进行渲染

挂载实例：将创建好的 Vue 实例挂载到 HTML 页面的 body 标签上

获取组件实例：通过 Vue 实例获取创建的组件实例

生命周期管理：定义组件的生命周期回调函数，确保组件的创建和销毁能够被正确管理

// 创建指定组件实例并挂载于body上
import Vue from 'vue';
export default function create(Component, props) {
    const vm = new Vue({
        render(h) {
            return h(Component, {
                props
            });
        }
    }).$mount();
    const comp = vm.$children[0];
    document.body.appendChild(vm.$el);
    // 定义清理函数
    comp.remove = () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
    };
    return comp;
}

Notice 组件

组件代码

组件说明

模板部分：使用 v-if 指令控制组件的显示与隐藏

属性定义：组件接受三个属性 title、message 和 duration

生命周期方法：

show()：用于显示组件，并设置自动关闭的时间

hide()：用于隐藏组件并移除实例

双向数据绑定：通过 data() 和 methods 属性管理组件的状态和交互逻辑

组件使用场景

示例应用

在登录功能中，通常需要在用户输入验证通过后，显示一个通知窗口。可以通过以下方式实现：

methods: {
    onLogin() {
        return this.$refs.loginForm.validate((isValid) => {
            if (!isValid) return;
            const notice = create(Notice, {
                title: "欢迎登录",
                message: "请根据提示进行登录",
                duration: 3000
            });
            notice.show();
        });
    }
}