插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种:
-
添加全局方法或者属性,如: vue-element
-
添加全局资源:指令/过滤器/过渡等,如 vue-touch
-
通过全局 mixin方法添加一些组件选项,如: vuex
-
添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
-
一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router
Vue.js 的插件应当有一个公开方法 install
。这个方法的第一个参数是 Vue
构造器 , 第二个参数是一个可选的选项对象:
一、声明插件
var toast = {};
toast.install = function(Vue, options) {
}
module.exports = toast;
二、编写插件
toast.install = function(Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod =
function
() {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive(
'my-directive'
, {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created:
function
() {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod =
function
(options) {
// 逻辑...
}
}
module.exports = toast;
三、注册插件
通过全局方法 Vue.use() 使用插件:
Vue.use(toast);
也可以传入一个选项对象:
Vue.use(toast, {});
四、使用插件
以下详细说明每种插件实现以及使用方法
1、添加实例方法或属性(给组件使用)
通过prototype来添加方法和属性
//让输出的数字翻倍,如果不是数字或者不能隐式转换为数字,则输出null
Vue.prototype.doubleNumber =
function
(val) {
if
(
typeof
val ===
'number'
) {
return
val * 2;
}
else
if
(!isNaN(Number(val))) {
return
Number(val) * 2;
}
else
{
return
null
}
}
<template>
<div>
{{num}}
<button @click=
"double"
>点击后让左边的数字翻倍</button>
</div>
</template>
<script>
export
default
{
data(){
return
{
num: 1
}
},
methods: {
double:
function
() {
//这里的this.doubleNumber()方法就是上面写的组件里的方法
this
.num =
this
.doubleNumber(
this
.num);
}
}
}
</script>
1、不管是【按值传递类型】还是【按引用传递类型】,该变量都不会被不同组件所共享,更准确的说,假如有A、B两个组件。A组件里的number数值改变,B组件里的number数值是不会跟着改变的。因此不要想着引用这样一个变量,然后修改了A中的值,B里也自动跟着改变了;
2、当组件里没有该属性时,调用时,显示的是通过插件获取的值;
当组件里有该属性时,调用时,显示的是组件里该属性的值;
由此而推,函数也是这样的,组件里的同名函数总是会覆盖插件提供的函数。
也就是说,当插件提供一个属性时,组件里没这个属性,就用插件的属性;组件有,就用组件自己的。
Vue.test =
function
() {
alert(
"123"
)
}
//注意先导入Vue对象才能使用
Vue.test()
代码会在每个组件(包括根组件)的created执行之前执行。
可以自行在每个组件的created方法里写一段console.log来查看测试
假如是写给例如methods属性的某个方法,
组件里若本身有test方法,并 不会 先执行插件的test方法,再执行组件的test方法。
而是只执行其中一个,并且优先执行组件本身的同名方法
总结:
1、如果同时有多个插件注入一个方法(例如created,那么会先执行先注入的那个方法,再依次执行后注入的,最后执行组件本身的)
2、注意,像methods属性下的方法,并不会在组件注入后每个都执行,而是只执行一个,并且优先执行组件本身的
4、添加全局资源
添加方法和正常添加方法类似,甚至几乎一样。
可以添加【自定义指令】、【过滤器】、【过渡等】,这里以【过滤器】为例
//时间格式化过滤器,输入内容是number或者Date对象,输出是YYYY-MM-DD HH-MM-SS
Vue.filter(
'formatTime'
,
function
(value) {
Date.prototype.Format =
function
(fmt) {
//author: meizz
var
o = {
"M+"
:
this
.getMonth() + 1,
//月份
"d+"
:
this
.getDate(),
//日
"h+"
:
this
.getHours(),
//小时
"m+"
:
this
.getMinutes(),
//分
"s+"
:
this
.getSeconds(),
//秒
"q+"
: Math.floor((
this
.getMonth() + 3) / 3),
//季度
"S"
:
this
.getMilliseconds()
//毫秒
};
if
(/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (
this
.getFullYear() +
""
).substr(4 - RegExp.$1.length));
for
(
var
k
in
o)
if
(
new
RegExp(
"("
+ k +
")"
).test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((
"00"
+ o[k]).substr((
""
+ o[k]).length)));
return
fmt;
}
return
new
Date(value).Format(
"yyyy-MM-dd hh:mm:ss"
);
})