Vue之mixin(全局)
先贴上官方定义。个人觉得全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on)使用场景:货币单位,时间格式。这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高。ex:step1: 先定义mixin.jsconst mixin = {methods: {/*** 格式化
·
先贴上官方定义。
个人觉得全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on)
使用场景:货币单位,时间格式。这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高。
ex:
step1: 先定义mixin.js
const mixin = {
methods: {
/**
* 格式化时间
* @param {string|number|object|Array} dateTime - 时间,可以是一个字符串、时间戳、表示时间的对象、Date对象或者******表示时间的数组
* @param {string} [fmt] - 格式
* @returns {string} 返回格式化后的日期时间,默认格式:2018年1月11日 15:00
* @see [momentjs]{@tutorial http://momentjs.cn/}
*/
formatDate (dateTime, fmt = 'YYYY年M月DD日 HH:mm:ss') {
if (!dateTime) {
return ''
}
moment.locale('zh-CN')
dateTime = moment(dateTime).format(fmt)
return dateTime
}
}
}export defaullt mixin
step2:在main.js文件里面
import mixin from './mixin'
Vue.mixin(mixin)
全局混入是.mixin没有s
step3:在你的vue文件里面就可以使用mixin里面定义好的东西比如
data() {
return {
userName: "等你",
time: this.formatDate(new Date()),
arr: [1,2,3,4,5,'文字'],
result: []
}
}
这个vue文件的数据源data里面的time就是引用混入进来的方法。
至此,全局混入大功告成,有心的读者也可以试试局部混入(主要用于后期代码维护)。
以上内容仅代表我的拙见,希望能抛砖引玉。有不正确的地方希望大牛们多多指正批评
更多推荐
已为社区贡献1条内容
所有评论(0)