Vue触发式全局组件构建的方法

　　

　　

在开发中总会遇到一些全局组件,如果通过<代码> 进口导入,<代码> 组件挂载就显得冗余,而一些UI框架(诸如elementUi, iview等)通过调用触发的形式就显得很便捷,本文就是简单的构建一个类似组件

　　

　　

前几月公司开发一个小程序后台管理系统,客户可以通过在电脑后台管理系统中定制自己的微信小程序,包括结构更改,数据上传等,通过将页面结构抽象成数据的方法,自由控制小程序的展示方式(横向抽出每个模块)
　　

　　

Vue触发式全局组件构建的方法

　　

而这其中频繁使用到图片上传,每个模块都得使用,无论是简历大法还是<代码> 进口都显得不太方便,这就显现出触发式全局注册组件的优势
　　

　　

Vue触发式全局组件构建的方法

　　

不废话直接开始吧

　　

<强>正文

　　

<强> 1,文件结构

　　

Vue触发式全局组件构建的方法”> <br/> 　　</p> 　　</p> <p>其中 　　<ul> 　　<李> <代码>模板。vue> </代码:是页面结构李</> 　　<李> <代码>初始化。js代码</>:是初始化操作,就处理调用参数注入李</> 　　<李> <代码>索引。js代码</>:抛出接口,用于<代码> Vue.use() </代码>注册李</> 　　</ul> 　　<p> <强> 2,文件解析</强> </p> 　　<p> <代码> template.vue </代码>文件没有太多可说的,只是你要展示的DOM结构,除了本身逻辑,只要预留出显示隐藏的方法,数据回传等一些业务需要的功能</p> 　　 　　<pre类=/* * 　　*> 　　从“进口uploadModalComponent。/template.vue ' 　　从“Vue”进口Vue//构造组件 　　让uploadModalConstructor=Vue.extend (uploadModalComponent);//组件实例 　　让美元vue;//生成dom 　　让initUploadModal=()=祝辞{//实例化 　　vue美元=new uploadModalConstructor ({ 　　艾尔:document.createElement (div) 　　});//注入页面 　　document.body.appendChild (vue。el美元); 　　} 　　 　　const UploadModal=(成功=()=比;{},失败=()=比;{})=比;{//初始化构架dom结构 　　initUploadModal ()//注入回调函数 　　如果(成功实例函数)vue美元。成功=成功; 　　其他console.error(“传入成功回调函数”); 　　如果(失败实例函数)vue美元。失败=失败; 　　其他console.error(“传入失败回调函数”);//组件显示 　　$ vue.onShow () 　　} 　　 　　出口默认UploadModal 　　 　　

<代码> index.js:

　　 　　//图片上传弹框工具 　　 　　从“进口uploadModel。/init.js ' 　　 　　const UploadModel={ 　　安装(Vue) {//注册全局组件 　　Vue.component (uploadModel.name uploadModel)//添加全局API 　　Vue.prototype。$ uploadModel=uploadModel 　　} 　　} 　　出口默认UploadModel; 　　 　　

需要使用时通过

　　 　　//更换图片 　　从“进口ShowUpLoadModal。/插件/upLoadModal”; 　　Vue.use (ShowUpLoadModal); 　　 　　

<代码>。uploadModel美元(选择)即可,这个例子逻辑简单,这里只是记录这种方法

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

Vue触发式全局组件构建的方法