Vue之mixin全局的用法详解

2024-08-09 18:02:02

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

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

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

详解vue项目中如何引入全局sass/less变量、function、mixin

让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import 'publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀! 接下来拯救我们的神器就要登场了---sass-resources-loader,它可以省去重复性的引入,还支持less,postcss等,具体用法如下: npm install -d
Vue之mixin全局的用法详解

先贴上官方定义. 个人觉得全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on) 使用场景:货币单位,时间格式.这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高. ex: step1: 先定义mixin.js const mixin = { methods: { /** * 格式化时间 * @param {string|number|object|Array} dateTime - 时间,可以是一个字符串.时间戳.
vue混入mixin流程与优缺点详解

目录 1.什么是mixin 2.mixin与Vuex的区别 3.mixin的使用 3.1.局部混入 3.2.全局混入 4.mixin选项合并 4.1.生命周期函数 4.2.data中的数据冲突 4.3.方法冲突 5.优缺点 5.1.优点 5.2.缺点 6.利用mixin开发一个UI库 1.什么是mixin 这不是Vue的专属的,可以说是一种思想,在很多开发框架中都实现了Mixin. 官方解释: mixin提供了一种非常灵活的方式,来分发Vue组件中可复用的功能.一个混入对象可以包含任意组件选项.
vue中 v-for循环的用法详解

1.v-for循环普通数组 ①创建vue对象 ② 循环数据结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对象结果: 4.v-for循环数字 ①创建vue对象实例 ②循环数字结果: 5.v-for中key的使用方式 ①创建vue对象实例注意:push()方法一般是添加到数组的最后的位置:unshift()方法是往最前面的位置添加. ②循环注意: v-for循环的时候,key属性只能使用number
Vue中axios的基本用法详解

目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节 4.axios在vue中的实例运用(留言评论接口) App.vue代码 mian.js代码 1.什么是axios? axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 2.axios的特征从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求支持 Promise API 拦截请求和响应
Vue插件之滑动验证码用法详解

本文实例讲述了Vue插件之滑动验证码用法.分享给大家供大家参考,具体如下: 目录预览基于滑动式的验证码,免于字母验证码的繁琐输入用于网页注册或者登录安装使用方法更新记录 V1.1.2 版本 V1.1.1 描述(此版本有bug,请使用最新版) V1.1.0 版本新增属性`imgs`: 内置方法 props传参(均为可选) 自定义回调函数注意事项预览基于滑动式的验证码,免于字母验证码的繁琐输入用于网页注册或者登录目前仅前端实现,支持移动端滑动事件.版本V1.1.2 github
vue+axios+promise实际开发用法详解

axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-resource转换过来的,差别说不来,我们讲一下axios在实际开发中的用法 axios特点 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 (就是有interceptor) 5.转换请求数据和响应数
基于vue+element实现全局loading过程详解

项目中使用的是vue+element实现的全局loading 1.引入所需组件,这里主要就是router和element组件,element组件引入可以参考element官网 2.下面就是重点及代码实现了首先是全局的一个变量配置参数,代码如下: //全局页面跳转是否启用loading export const routerLoading = true; //全局api接口调用是否启用loading export const apiLoading = true; //loading参数配置 ex
PHP预定义变量9大超全局数组用法详解

1.$_SERVER $_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户配置及当前请求环境的有关信息.根据服务器不同,$_SERVER中的变量值和变量个数会有差别,不过一般都可以找到CGI1.1规范中定义的变量.其中包括: $_SERVER['HTTP_REFERER']; 引导用户到达当前位置的页面的URL : $_SERVER['REMOTE_ADDR']; 客户IP地址 : $_SERVER['REQUEST_URI']; URL的路径部分.如果URL是 [ur
vue中 this.$set的用法详解

当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click=&qu
Vue 中mixin 的用法详解

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

Vue之mixin全局的用法详解

相关推荐

随机推荐