在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:
1.首先新建一个Cmponent.vue文件
// Cmponent.vue
<template>
<div>
我是组件
</div>
</template> <script>
export default { }
</script> <style scoped>
div{
font-size:40px;
color:#fbb;
text-align:center;
}
</style>
2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件
import component from './Cmponent.vue'
const component = {
install:function(Vue){
Vue.component('component-name',component)
} //'component-name'这就是后面可以使用的组件的名字,install是默认的一个方法 }
// 导出该组件
export default component
3.使用
// 只要在index.js里规定了install方法,就可以向其他ui组件库那样,使用Vue.use()来全局使用
// 只要在index.js里规定了install方法,就可以向其他ui组件库那样,使用Vue.use()来全局使用
import loading from './index.js' Vue.use(loading) <template>
<div>
<component-name></component-name>
</div>
</template>
vue使用install函数把组件做成插件方便全局调用的更多相关文章
-
Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
-
【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
-
vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
-
vue通过extend动态创建全局组件(插件)学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
-
vue自定义全局组件(自定义插件)
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...
-
自己封装 vue 组件 和 插件
vue 组件 一.组件的创建,两种方法.(本质上是1.2两种,vue文件,只是创建了一个 组件选项对象,仅是一个js对象)1.定义组件:Vue.component('button-counter', ...
-
vue命令式组件和插件编写
一直在写各种业务,好多基本用法都忘记了,回顾一下: 一.vue各种UI库里的命令式组件比如element-ui里Notification组件,可以这样调用 this.$notify({ title: ...
-
vue函数化组件 functional
需要在组件中把functional 设置为true 一个函数化组件像这样: Vue.component('testcomponent', { functional: true, // 为了弥补缺少的实 ...
-
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
在我们开发代码的时候,一般都喜欢进行一定程度的重构,以达到简化代码.关注点分离.提高代码可读性等等方面的考虑,本篇随笔介绍在VUE+Element 前端应用开发过程中,实现简化main.js处理代码, ...
随机推荐
-
EXTJS4.2 时间动态刷新显示
function clockGo() { Ext.TaskManager.start({ run: function () { //Ext.getCmp("clock").setT ...
-
soundPool和audiofocus
audiofocus试验: 使用soundPool来写一个播放音频的porject. 资源初始化: setContentView(R.layout.activity_main); Button bt1 ...
-
关于TAR ZXVF命令解释
分别是四个参数x : 从 tar 包中把文件提取出来z : 表示 tar 包是被 gzip 压缩过的,所以解压时需要用 gunzip 解压v : 显示详细信息f xxx.tar.gz : 指定被处理的 ...
-
[LeetCode] Image Overlap 图像重叠
Two images A and B are given, represented as binary, square matrices of the same size. (A binary ma ...
-
Bootstrap3基础 栅格系统 1行最多12列
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
-
Hard Life UVA - 1389(最大密度子图 输出点集)
题意: rt 解析: 我用的第二种方法... s向所有的边连权值为1的边 所有的点向t连权值为mid的边 如果存在u - > v 则边向u和v分别连一条权值为INF的边 二分mid 用dfs ...
-
IIS7部署报错 500.22错误 检查到这集成托管模式下不使用的ASP.NET配置
公司的一个项目,环境为: .Net 4.0 + MVC3,部署在Windows Server 2003R2 IIS6.0上面运行正常, 迁移到新服务器Windows Server 2008R2,部署在 ...
-
生日蛋糕 POJ - 1190 (搜索+剪枝)
7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为Hi的圆柱.当 ...
-
【C语言】字节对齐问题(以32位系统为例)
1. 什么是对齐? 现代计算机中内存空间都是按照字节(byte)划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问,这就需要各类型 ...
-
PowerMockRunner和ActiveObjectsJUnitRunner
Jira的二次开发,需要作单元测试. 测试跟数据库连接的类,比如service类,需要在类上加@RunWith(ActiveObjectsJUnitRunner.class). 有时需要搭配mocki ...