vue使用install函数把组件做成插件方便全局调用
在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处理代码, ...
随机推荐
- 戴尔 R730 服务器装 server 2016。
服务器里面原装系统是 centos 7 ,服务器快递过来时 我没用root账号,(主要是主管忘了这台服务器用户名密码了). 需要用的系统是 server 2016 我这边就按正常的装机流程装机. 1, ...
- Bash基础——内置命令
前言 Shell有很多内置在其源代码中的命令.由于命令是内置的,所以Shell不必到磁盘上搜索它们.内置命令执行速度更快,不同的Shell内置命令有所不同. 如何查找内置命令 之前查了好久怎么收索内置 ...
- IDEA实用教程(四)—— 创建JavaSE工程
三. 创建JavaSE工程 第一步 第二步 第三步 第四步 第五步 第六步 运行代码.右键选中图中按钮 选择Run
- 从OkHttp的源码来看 HTTP
先来了解一下OkHttp的历史,最早是square公司觉得Android给的HttpClient这块的库不太好用,于是乎做了一层包装,再后来他们包装的这个库被Android官方给收回去了,而Andro ...
- 链表(python)
链表1.为什么需要链表顺序表的构建需要预先知道数据大小来申请连续的存储空间,而在进行扩充时又需要进行数据的搬迁,所以使用起来并不是很灵活.链表结构可以充分利用计算机内存空间,实现灵活的内存动态管理. ...
- MySQL进阶12-- 数据类型介绍: 数值型/字符型/日期型-- 正负溢出保护/枚举型/set型/时间戳
/*进阶12 SQL 数据类型介绍 数值型: 整数: Tinyint(1b) < mediumint(3b)<smallint(2b) <int(4b) <bigint(8b) ...
- 第七届蓝桥杯C/C++程序设计本科B组决赛 ——棋子换位(代码补全题)
棋子换位 有n个棋子A,n个棋子B,在棋盘上排成一行.它们中间隔着一个空位,用“.”表示,比如: AAA.BBB 现在需要所有的A棋子和B棋子交换位置.移动棋子的规则是:1. A棋子只能往右边移动,B ...
- 日常2018/4/9---b/s和c/s架构分别是什么?区别?
b/s和c/s架构分别是什么?区别? b/s是指前后端分别是 Browser/Server的模式.(3层c/s模式) c/s是指前后端分别是 Client/Server的模式.(2层c/s模式) c/ ...
- python学习之模块导入,操作邮件,redis
python基础学习06 模块导入 导入模块的顺序 1.先从当前目录下找 2.当前目录下找不到,再从环境变量中找,如果在同时在当前目录和环境变量中建立相同的py文件,优先使用当前目录下的 导入模块的实 ...
- dell 7559 安装Manjaro 18
本来是装黑苹果的,折腾好几天都装好了,是可以正常使用的,可是clover始终有一个问题,每次启动前需要覆盖一遍EFI分区内EFI目录的CLOVER目录内的所有文件,方能引导MAC. 不然就卡Init ...