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