Vue2自定义插件的写法-Vue.use()
最近在用vue2完善一个项目,顺便温习下vue2的基础知识点!
有些知识点恰好没用到时间一长就会淡忘,这样对自己是一种损失。
定义一个对象 对象里可以有任何内容 但install的函数是必不可少的,因为 use方法会去调用target.install();
值得一提的是这里调用install的时候会向这个函数传入Vue实例(刚出生的时候,或者叫 beforeCreate钩子时期的实例),这就给了我们很多的操作空间!
我们知道不管是搞全局事件总线还是怎样都是往Vue原型上挂方法,这里就可以利用它来封装属于自己的Vue插件;
Vue.use()其实还有第二个参数,可以是一个对象,可以传入自己diy的内容,让Vue变得更加华丽!、
下边看我写的示例吧;
myplgins.js
------------------
import axios from "@/utils/network";
const myPlugins = {};
myPlugins.install = function (Vue, {a, b, c}) {
Vue.config.productionTip = false;
Vue.config.devtools = true
Vue.prototype.$bus=Vue //将一个全新的vue实例当作一个共有对象 全局事件总线
Vue.prototype.axios=axios
}
export default myPlugins
main.js
--------------------- import myPlugins from '@/utils/testPlugins' Vue.use(myPlugins, {a: 1, b: 2, c: 3})
Vue2自定义插件的写法-Vue.use()的更多相关文章
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...
- vue之自定义插件
1.插件的作用 插件通常会为 Vue 添加全局功能,一般是添加全局方法/全局指令/过滤器等 Vue 插件有一个公开方法 install ,通过 install 方法给 Vue 添加全局功能 通过全局方 ...
- 浅析vue封装自定义插件
在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装 ...
- vue自定义插件封装,实现简易的elementUi的Message和MessageBox
vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition ...
- vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件
vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...
- vue2.0插件--loading
loading效果很常见,常见到我们任何一个项目中,都可以见到他的身影.今天就以loading作为切入口,唠叨一下vuejs的插件的写法. 看vuejs官方文档关于插件的说明,关于使用插件和写插件,V ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- jquery插件的写法
jquery插件及zepto插件,写法上有些区别. 区别点: 1.自定义事件的命名空间 jq的时间命名空间是用点“.”,而zepto是用冒号“:” 如 //jquery $(this).trigger ...
- Qt之自定义插件(for Qt Designer)
之前Blog里面有关于QWT的编译.配置.使用的文章,分别是在VS与Creator下进行的. QWT编译.配置.使用(VS2010 + Qt5.1.0). QWT编译.配置.使用(Qt Creator ...
随机推荐
- k8s 初始化环境(1)
概念 k8s/kubernetes 容器化部署 解决容器编排问题,kubernetes为容器编排软件的佼佼者 kubernets为一组服务器集群 功能 自我修复 一个容器崩溃,另一个容器起来 弹性伸缩 ...
- git冲突解决、线上分支合并、luffy项目后台登陆注册页面分析引入
今日内容概要 git冲突解决 线上分支合并 登陆注册页面(引入) 手机号是否存在接口 腾讯云短信申请 内容详细 1.git冲突解决 1.1 多人在同一分支开发,出现冲突 # 先将前端项目也做上传到 g ...
- Windows下搭建redis 哨兵环境
从 https://github.com/tporadowski/redis/releases 下载windows版的redis,自行下载解压. 关于哨兵模式的讲解,强烈推荐 [深入学习redis(4 ...
- .NET混合开发解决方案5 WebView2运行时与分发应用
系列目录 [已更新最新开发文章,点击查看详细] 发布使用Microsoft Edge WebView2的应用程序时,客户端计算机上需要安装WebView2运行时,可以安装自动更新的Evergr ...
- 斯坦福NLP课程 | 第1讲 - NLP介绍与词向量初步
作者:韩信子@ShowMeAI,路遥@ShowMeAI,奇异果@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www. ...
- [笔记] K-D Tree
一种可以 高效处理 \(k\) 维空间信息 的数据结构. 在正确使用的情况下,复杂度为 \(O(n^{1-\frac{1}{k}})\). K-D Tree 的实现 建树 随机一维选择最中间的点为当前 ...
- 如何使用Shell写一个显示目录结构的命令?
公众号关注 「开源Linux」 回复「学习」,有我为您特别筛选的学习资料~ 在Linux中使用Shell写一个显示目录结构的命令,快速寻找目录结构. 1.代码 #!/usr/bin/env bash ...
- 掌握AI学习路上核心理论知识,你绝对不能错过这份最全资料包
人工智能成为当下科技发展的代表之一,持续受到了不少追捧,不管你是否是这一专业的学生或者职场人,学习并掌握一项新潮技能总是不会被同龄人淘汰的.我曾经问过别人.也被别人问过关于学习人工智能(AI)最好的方 ...
- Django学习——图书相关表关系建立、基于双下划线的跨表查询、聚合查询、分组查询、F查询、Q查询、admin的使用、使用脚本调用Django、Django查看源生sql
0 图书相关表关系建立 1.5个表 2.书籍表,作者表,作者详情表(垂直分表),出版社表,书籍和作者表(多对多关系) 一对一 多对多 本质都是一对多 外键关系 3.一对一的关系,关联字段可以写在任意一 ...
- 前端面试 -HTTP系列
http和https 的区别? 端口 经济 安全性 响应速度 http 80端口 不需要 明文传输,安全性差 页面响应速度快,使用tcp的3次握手 https 443端口 费钱SSL需要ca 证书 S ...