扩展 Vue

Mixins

Mixin (混入) 是一种可以在多个 Vue 组件之间灵活复用特性的机制。你可以像写一个普通 Vue 组件的选项对象一样编写一个 mixin:

1
2
3
4
5
6
7
8
9
10
11
// mixin.js
module.exports = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
1
2
3
4
5
6
// test.js
var myMixin = require('./mixin')
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

更多细节请参见 API

使用插件进行扩展

通常插件会为 Vue 添加一个全局的功能。

撰写插件

你可以撰写以下几种典型类型的插件:

  1. 添加一个或几个全局方法。比如 vue-element
  2. 添加一个或几个全局资源:指令、过滤器、动画效果等。比如 vue-touch
  3. 通过绑定到 Vue.prototype 的方式添加一些 Vue 实例方法。这里有个约定,就是 Vue 的实例方法应该带有 $ 前缀,这样就不会和用户的数据和方法产生冲突了。
1
2
3
4
5
exports.install = function (Vue, options) {
Vue.myGlobalMethod = ... // 1
Vue.directive('my-directive', {}) // 2
Vue.prototype.$myMethod = ... // 3
}

使用插件

假设我们使用的构建系统是 CommonJS,则需要作如下调用:

1
2
3
var vueTouch = require('vue-touch')
// use the plugin globally
Vue.use(vueTouch)

你也可以向插件里传递额外的选项:

1
2
3
Vue.use(require('my-plugin'), {
/* pass in additional options */
})

现有的插件 & 工具

下一节: 最佳实践与技巧.