工具函数创建组件实例

工具函数说明

为了实现组件实例的创建与管理，我们编写了一个工具函数 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();        });    }}