在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函数把组件做成插件方便全局调用的更多相关文章

  1. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  2. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)

    Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

  3. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  4. vue通过extend动态创建全局组件(插件)学习小记

    测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...

  5. vue自定义全局组件(自定义插件)

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...

  6. 自己封装 vue 组件 和 插件

    vue 组件 一.组件的创建,两种方法.(本质上是1.2两种,vue文件,只是创建了一个  组件选项对象,仅是一个js对象)1.定义组件:Vue.component('button-counter', ...

  7. vue命令式组件和插件编写

    一直在写各种业务,好多基本用法都忘记了,回顾一下: 一.vue各种UI库里的命令式组件比如element-ui里Notification组件,可以这样调用 this.$notify({ title: ...

  8. vue函数化组件 functional

    需要在组件中把functional 设置为true 一个函数化组件像这样: Vue.component('testcomponent', { functional: true, // 为了弥补缺少的实 ...

  9. 循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

    在我们开发代码的时候,一般都喜欢进行一定程度的重构,以达到简化代码.关注点分离.提高代码可读性等等方面的考虑,本篇随笔介绍在VUE+Element 前端应用开发过程中,实现简化main.js处理代码, ...

随机推荐

  1. redis连接数高居不下,怎么破?。。。。这么破

    最近项目一直在使用redis,首次用redis,随便从网上找了例子就用了,一开始用的还挺正常,后来发现,当客户端访问量一上来,redis的连接数居高不下,一开始以为是客户端没有关闭,开始怀疑redis ...

  2. C++——overloading

    参考 C++——overloading principle analysis operator overloading C语言中,对一个东西进行操作一定要涉及到一个函数,对于自定义类型,为了实现其四则 ...

  3. iptables详解(5)iptables的icmp扩展

    ICMP(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议簇的一个子协议,用于在IP主机.路由器之间传递控制消息.控制消息是指网络 ...

  4. PAT基础级-钻石段位样卷2-7-3 大笨钟 (10 分)

    微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜身体早点睡觉.不过由于笨钟自己作息也不是很规律,所以敲钟并不定时.一般敲钟的点数是根据敲钟时间而定的,如果正好在某个整点敲,那么“当”数就等于那 ...

  5. Tomcat 安装配置

    操作系统:win10 家庭版 1. 官网下载 https://tomcat.apache.org/download-80.cgi 我下载的免安装装. 2.文件解压到目录 D:\Program File ...

  6. phpstorm快捷键使用

  7. (一)python3.7的安装

    1.从官网https://www.python.org/下载相应版本的安装包.一般下载 executable installer,x86 表示是 32 位的,x86-64 表示 64 位的. 2.可选 ...

  8. archlinux 使用 postgresql

    一.安装与初始化 1.初始化数据目录 默认安装后已创建 postgres 系统用户 切换到 postgres 用户 $ sudo -iu postgres # Or su - postgres for ...

  9. Luogu P4198 楼房重建 (李超线段树)

    题目 传送门 题解 首先转化成到(0,0)(0,0)(0,0)的斜率. 那么就是求多少个点是前缀最大值. 做法是线段树,用gao(i,x)gao(i,x)gao(i,x)表示在iii区间内,之前最大值 ...

  10. docker(一) -- docker安装、容器加速、下载、备份

    一.docker的 容器是从镜像中创建出来的虚拟实例 容器用来运行实例,是读写层 镜像用来安装程序,是只读层 1. docker的安装和基本操作 安装命令 yum -y update yum inst ...