关于隐式创建vue实例实现简化弹出框组件显示步骤
我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容")那样简单调用呢?
答案是有的,
vue.extent会返回一个预设了部分选项的Vue实例构造器,既然是vue实例构造器 那我们理论上是可以像new Vue({})那样去new 这个extent实例的,vue还提供了$amount,表示挂在到节点上,这样我们理论上可以这样:
1 2 3 4 5 6 7 | var author = Vue.extend({ template: "<p><a>helloe</a></p>" }); function addEle(){ new author({propsData:{author: "zhuwei" }}).$mount( "#author" ); } |
我们通过调用addEle方法就动态在ID为author节点上渲染了一个vue(前提是html界面已经存在ID为author的节点),到现在为止好像没什么特别的,如果我们在addEle方法里面直接创建一个ID为author的节点呢
1 2 3 4 5 6 | function addEle(){ var authorEle = document.createElement( "div" ); authorEle.setAttribute( "ID" , "author" ); document.body.appendChild(authorEle); new author().$mount( "#author" ); } |
这样至少html部分我们不需要添加这个ID为author的节点了,然后因为是弹出框组件,所以我们需要暴露出一个属性显示用户希望显示的信息,这里面我们使用propsData,它可以在new vue({})的实例中指定属性值,vue本意说是为了方便测试,这里我们拿过来用来给我们的extent实例传递显示信息:
1 2 3 4 5 6 | function addEle(msg){ var authorEle = document.createElement( "div" ); authorEle.setAttribute( "ID" , "author" ); document.body.appendChild(authorEle); new author({propsData:{author:msg}}).$mount( "#author" ); } |
这样当用户想弹出框的时候,直接点击addEle("hello world")就可以弹出信息,当然具体的弹出框组件我并没有写,这里面只是说出设计思想,细节大家都可以实现
分类:
vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· Java轻量级代码工程
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战