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 EasyUI API 中文文档 搜索框
Sep 29 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
js倒计时简单实现方法
Dec 17 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
smarty的保留变量问题
2008/10/23 PHP
PHP入门学习笔记之一
2010/10/12 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
js调用css属性写法
2013/09/21 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python线程、进程和协程详解
2016/07/19 Python
Python算法之图的遍历
2017/11/16 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python配置文件处理的方法教程
2019/08/29 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
请介绍一下Ant
2016/07/22 面试题
运动会800米加油稿
2014/02/22 职场文书
违章停车检讨书
2014/10/21 职场文书
部门2015年度工作总结
2015/04/29 职场文书
2019广播稿怎么写
2019/04/17 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
java基础——多线程
2021/07/03 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL