13518219792
今天就跟大家聊聊有关如何在Vue项目中使用全局mixin，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
公司主营业务：成都网站建设、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出敦化免费做网站回馈大家。
使用场景：货币单位，时间格式。这些如果在用到的页面使用的话代码会重复的很多，所以在全局混入这些实例会减少代码量，可维护性也比较高。
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 mixinstep2：在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就是引用混入进来的方法。
使用mixins里的方法
设置路由
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path:'/',
redirect:'/index'
},
{
path: '/about',
name: 'About',
component:resolve => require(['@/pages/About'],resolve)
},
{
path: '/index',
name: 'Index',
component:resolve => require(['@/pages/Index'],resolve)
},
{
path: '/product',
name: 'Product',
component:resolve => require(['@/pages/Product'],resolve)
}
]
})页面调用mixins里的loadPage方法
