Vue之mixin全局的用法詳解
先貼上官方定義。
個(gè)人覺(jué)得全局mixin就是給全部Vue文件添加一些公用的實(shí)例（方法，過(guò)濾器and so on）
使用場(chǎng)景：貨幣單位，時(shí)間格式。這些如果在用到的頁(yè)面使用的話(huà)代碼會(huì)重復(fù)的很多，所以在全局混入這些實(shí)例會(huì)減少代碼量，可維護(hù)性也比較高。
ex：
step1: 先定義mixin.js
const mixin = {
methods: {
/**
* 格式化時(shí)間
* @param {string|number|object|Array} dateTime - 時(shí)間，可以是一個(gè)字符串、時(shí)間戳、表示時(shí)間的對(duì)象、Date對(duì)象或者******表示時(shí)間的數(shù)組
* @param {string} [fmt] - 格式
* @returns {string} 返回格式化后的日期時(shí)間，默認(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沒(méi)有s
step3：在你的vue文件里面就可以使用mixin里面定義好的東西比如
data() {
return {
userName: "等你",
time: this.formatDate(new Date()),
arr: [1,2,3,4,5,'文字'],
result: []
}
}
這個(gè)vue文件的數(shù)據(jù)源data里面的time就是引用混入進(jìn)來(lái)的方法。
使用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)
}
]
})
頁(yè)面調(diào)用mixins里的loadPage方法
<p @click="loadPage('Index')">Index</p>
Index頁(yè)面如下
// src/pages/Index
<template>
<div>
<p>這是index頁(yè)面</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ù)）。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了vue3中router路由以及vuex的store使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue項(xiàng)目打包解決靜態(tài)資源無(wú)法加載和路由加載無(wú)效(404)問(wèn)題
這篇文章主要介紹了vue項(xiàng)目打包，解決靜態(tài)資源無(wú)法加載和路由加載無(wú)效(404)問(wèn)題,靜態(tài)資源無(wú)法使用，那就說(shuō)明項(xiàng)目打包后，圖片和其他靜態(tài)資源文件相對(duì)路徑不對(duì),本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧2023-10-10
使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟
這篇文章主要介紹了使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪(fǎng)問(wèn)子組件實(shí)例以及使用 $children 和 $parent 訪(fǎng)問(wèn)父子組件實(shí)例2023-09-09
這篇文章主要介紹了vue中全局變量的定義和使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)
這篇文章主要介紹了Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue學(xué)習(xí)教程之帶你一步步詳細(xì)解析vue-cli
這篇文章的主題是vue-cli的理解?；蛟S，很多人在開(kāi)發(fā)vue的時(shí)候，我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題——只會(huì)去用，而不明白它的里面的東西。現(xiàn)在的框架可以說(shuō)是足夠的優(yōu)秀，讓開(kāi)發(fā)者不用為搭建開(kāi)發(fā)環(huán)境而煩惱。但是有時(shí)候，我們還是得回到原始生活體驗(yàn)一下，才能夠讓自己更上層樓。2017-12-12
基于Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08