本文共 1462 字,大约阅读时间需要 4 分钟。
为了实现组件实例的创建与管理,我们编写了一个工具函数 create,该函数负责根据传入的组件类和属性参数,创建一个新的 Vue 实例,并将其挂载至页面中。
Vue 框架创建一个新的实例,并配置其渲染逻辑render 函数,将传入的组件进行渲染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;} {{ title }}
{{ message }}
v-if 指令控制组件的显示与隐藏title、message 和 durationshow():用于显示组件,并设置自动关闭的时间hide():用于隐藏组件并移除实例data() 和 methods 属性管理组件的状态和交互逻辑在登录功能中,通常需要在用户输入验证通过后,显示一个通知窗口。可以通过以下方式实现:
methods: { onLogin() { return this.$refs.loginForm.validate((isValid) => { if (!isValid) return; const notice = create(Notice, { title: "欢迎登录", message: "请根据提示进行登录", duration: 3000 }); notice.show(); }); }} Notice 组件props 属性将组件的属性进行传递create 工具函数确保组件的生命周期被正确管理duration 属性设置自动关闭时间,确保页面不会被长时间占用转载地址:http://tvsh.baihongyu.com/