插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
- 添加全局方法或者属性。如:vue-custom-element
- 添加全局资源:指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法,通过把它们添加到
Vue.prototype
上实现。 - 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
那么,接下来就开发一个简单的插件来来体验一下。
以添加Vue实例的方法为例:
<div id="app"></div>
<script>
//定义插件的功能
var get = {
go(value) {
console.log(value)
}
}
//引入插件
var myplugin = {
install(v) {
v.prototype.$get = get;
}
}
//使用插件
Vue.use(myplugin);
var vm = new Vue({
el: "#app",
mounted() {
// 调用插件中的方法
this.$get.go('hello world!!!')
}
})
</script>
//结果
hello world!!!
需要注意的是:
1、插件的必须暴露
出一个install
的方法,这个方法第一个参数是Vue的构造器,第二个参数是一个对象;
2、在实例Vue之前使用
Vue.use使用插件
在明白上面两点之后,这段代码剩下的就好理解了,在实例原型上的插件,直接通过this.$get.go()
就可以使用了