Vue之mixin全局的用法詳解
先貼上官方定義。
個人覺得全局mixin就是給全部Vue文件添加一些公用的實(shí)例(方法,過濾器and so on)
使用場景:貨幣單位,時間格式。這些如果在用到的頁面使用的話代碼會重復(fù)的很多,所以在全局混入這些實(shí)例會減少代碼量,可維護(hù)性也比較高。
ex:
step1: 先定義mixin.js
const mixin = {
methods: {
/**
* 格式化時間
* @param {string|number|object|Array} dateTime - 時間,可以是一個字符串、時間戳、表示時間的對象、Date對象或者******表示時間的數(shù)組
* @param {string} [fmt] - 格式
* @returns {string} 返回格式化后的日期時間,默認(rèn)格式: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文件的數(shù)據(jù)源data里面的time就是引用混入進(jìn)來的方法。
使用mixins里的方法
設(shè)置路由
// 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)
}
]
})
頁面調(diào)用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>
至此,全局混入大功告成,有心的讀者也可以試試局部混入(主要用于后期代碼維護(hù))。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實(shí)現(xiàn),需要的朋友可以參考下2024-01-01
Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-06-06
vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
Vue3.0中Ref與Reactive的區(qū)別示例詳析
在vue3中對響應(yīng)式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,這篇文章主要給大家介紹了關(guān)于Vue3.0中Ref與Reactive區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-07-07
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情,文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開詳細(xì)內(nèi)容,需要的小伙伴可以參考一下,希望對你的學(xué)習(xí)或工作有所幫助2022-03-03
淺談Vue.js之初始化el以及數(shù)據(jù)的綁定說明
今天小編就為大家分享一篇淺談Vue.js之初始化el以及數(shù)據(jù)的綁定說明,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺管理系統(tǒng)的開發(fā)中,都會遇到很多table,但每一次都去引入el-table就會導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09

