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

前言

在开发中，总是有一些全局组件。如果通过导入的方式导入组件，那么组件将是冗余的，而一些UI框架(比如elementUi、iview等。)通过调用和触发会非常方便。本文只是构建一个类似的组件

背景

几个月前，公司开发了一个小程序后台管理系统。客户可以在pc后台管理系统中自定义自己的微信小程序，包括结构变化、数据上传等。并通过将页面结构抽象为数据(水平提取每个模块)自由控制小程序的显示模式

在这种情况下，图像上传是经常使用的，每个模块都必须使用。无论是cv解算还是导入都不方便，可见触发全局注册组件的优势

别胡说。我们开始吧

文本

1.文件结构

其间

Template.vue:是页面结构。init.js:是初始化操作，处理调用参数被注入index.js:抛出接口进行Vue.use()注册。2.文件解析

template.vue文件中没有太多可以说的，但是你想要展示的DOM结构，除了它自己的逻辑之外，只要保留一些业务需要的功能，比如展示隐藏的方法和数据返回。

/* * * onShow-控件组件显示* * @ return { type } */onShow(){ this . uploadmodalshow=true }，init.js:

从“”导入上传modalcomponent。/template.vue '从' vue'/构造组件导入vue让上传modalconstructor=vue.extend(上传modalcomponent)；//组件实例let $ vue//生成domlet initUploadModal=()={ //实例化$ vue=new uploadmodalconstructor({ El : document . create element(' div ')})；//注入page document . body . append child($ vue)。$ El)；} const upload modal=(success=()={ }，fail=()={ })={//初始化框架dom结构initUploadModal() //注入回调函数if(函数的成功实例)$ vue.success=successElse console.error('成功传入回调函数')；if(fail instance of Function)$ vue . fail=fail；Else console.error('传入的回调函数失败')；//组件显示$ vue . onshou()}导出默认uploadmodalindex.js:

//图片上传项目符号框工具从'导入上传模型'。/init . js ' const upload model={ install(vue){//注册全局组件Vue.component(uploadModel.name，UploadModel) //添加全局API vue . prototype . $ upload model=upload model } }导出默认upload model；需要时通过

//将图片导入显示上传模式从“”更改为“”。/plugin/上传模式'；vue . use(ShowUpLoadModal)；这个。$uploadModel (opts)就够了。这个例子的逻辑很简单，这个方法只记录在这里

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。