DDR爱好者之家

Vue之mixin全局的用法详解
站长资源 2024/11/26 佚名
50 1538
DDR爱好者之家 Design By 杰米

先贴上官方定义。

个人觉得全局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>

至此，全局混入大功告成，有心的读者也可以试试局部混入（主要用于后期代码维护）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米