Vue 自定义动态组件实例详解


Posted in Javascript onMarch 28, 2018

现在基于vue的UI组件库有很多,比如iview,element-ui等。但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件。

举第一个栗子

用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示:

Vue 自定义动态组件实例详解

index.vue里写我们的组件,代码如下:

Vue 自定义动态组件实例详解

index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下:

Vue 自定义动态组件实例详解

接下来我们要在默认的main.js里将刚刚写的index.js文件导入,并通过Vue.use来使用它,代码如下:

Vue 自定义动态组件实例详解

大功告成,接下来在app.vue里直接使用就可以啦,可以看到页面已经显示相应的组件了,如图:

Vue 自定义动态组件实例详解

这时候我们还可以自定义click事件,并通过参数的方式传递给我们的插件,插件可以通过props属性获取到该事件,如图:

Vue 自定义动态组件实例详解

可以看到页面已经生效了:

Vue 自定义动态组件实例详解

Vue.component(id, [definition])用于注册或获取组件。

Vue.use(plugin)用于安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。当 install 方法被同一个插件多次调用,插件将只会被安装一次。

举第二个栗子

我们再建一个文件夹,如图:

Vue 自定义动态组件实例详解

我们要写一个组件,能够显示外部传进来的内容,并在3秒后自动消失,代码如下:

Vue 自定义动态组件实例详解

接下来我们要在index.js里使用构造器来创建它,如图:

Vue 自定义动态组件实例详解

依旧在默认的main.js里引用刚刚的js文件,并加入到Vue实例上,这样我们就可以直接通过this.$seconddemo()来调用了,代码如下:

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

在app.vue里使用它,发现插件加载成功了,如图:

Vue 自定义动态组件实例详解

Vue.extend(options)是 Vue 的构造器,用于创建一个“子类”。

统一管理自定义组件

当组件数量很多时,我们可以通过提供一个统一的出口文件来管理这些自定义组件,首先在global文件夹下新建一个index.js文件,代码如图:

Vue 自定义动态组件实例详解

index.js文件帮我们把所有自定义的组件都通过Vue.component注册了,最后export一个包含install方法的对象给Vue.use()使用。

这时候我们不需要在main.js里逐个添加动态组件了,只需要导入统一的index.js文件,并用Vue.use它就ok了。

Javascript 相关文章推荐
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 #Javascript
You might like
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python实现选择排序
2017/06/04 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python 获取图片分辨率的方法
2019/01/08 Python
简单了解django orm中介模型
2019/07/30 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
超市开店计划书
2014/04/26 职场文书
小学生优秀评语
2014/12/29 职场文书
投诉信范文
2015/07/02 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
导游词之张家口
2019/12/13 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android