本文共 1462 字，大约阅读时间需要 4 分钟。

工具函数创建组件实例

工具函数说明

为了实现组件实例的创建与管理，我们编写了一个工具函数 create，该函数负责根据传入的组件类和属性参数，创建一个新的 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 组件

组件代码

组件说明

组件使用场景

示例应用

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

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

使用说明

转载地址：http://tvsh.baihongyu.com/