Vue.extend编程式插入组件的实现-创新互联
前言
日常中我们要使用一个弹框组件的方式通常是先通过Vue.component 全局或是 component 局部注册后,然后在模版中使用。接下来我们尝试编程式的使用组件。
实现
其实步骤很简单
- 通过 Vue.extend() 创建构造器
- 通过 Vue.$mount() 挂载到目标元素上
- 目标实现一个 alert 弹框,确认和取消功能如下图
document.createElement
其实想要插入一个元素,通过 document.createElement 就可以实现,并非一定需要上面两步,但是涉及到组件的复杂度、样式设置、可维护性所以使用创建构造器的方式比较可行。
Vue.extend()
首先来定义这个弹框的结构和样式,就是正常的写组件即可
这里是标题
{{ cancelText }}{{ sureText }}
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:Vue.extend编程式插入组件的实现-创新互联
当前URL:http://myzitong.com/article/dpcdoj.html