先贴上官方定义。
个人觉得全局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就是引用混入进来的方法。
使用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方法
<p @click="loadPage('Index')">Index</p>
Index页面如下
// src/pages/Index <template> <div> <p>这是index页面</p> <p @click="loadPage('Index')">Index</p> <p @click="loadPage('About')">About</p> <p @click="loadPage('Product')">Product</p> </div> </template> <script> export default{ } </script> <style> </style>
至此,全局混入大功告成,有心的读者也可以试试局部混入(主要用于后期代码维护)。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]