定义全局插件的步骤
1.定义全局插件 pluginsUtil.js
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
export default {
install (Vue, options) {
// 具体4种方式,写在此处
}
}
2.main.js里引入并使用
import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)
3.组件内调用
vue全局插件的4种方式
请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。
推荐使用:模块化的导出、导入
1.Vue.mixin 方式
注册全局混合对象
Vue.mixin({
data () {
return {
someValue1: 'some value1:mixin的data里的值'
}
}
})
2.Vue.prototype 方式
定义 Vue 原型上的属性
Vue.prototype.someValue2 = 'someValue2:Vue.prototype上的值'
Vue.prototype.getDate = function () {
let dateNew = new Date()
return dateNew
}
3.Vue.filter 方式
定义全局过滤器
Vue.filter('vcntFormat', function (cnt) {
return cnt >= 100000 ? Math.floor(cnt / 10000) + '万' : cnt
})
4.Vue.directive 方式
定义全局自定义指令
Vue.directive('myfocus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
- 详细代码见github仓库:https://github.com/cag2050/vu...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。