Vueのmixin全体の使い方を詳しく説明します。
まず公式の定義を貼ります。
個人的にはグローバルmixinはすべてのVueファイルにいくつかの共通の実例を追加することだと思います。
使用シーン:通貨単位、時間書式。これらは使っているページで使うとコードが多く重複しますので、全体的にこれらの例を混ぜるとコード量が減り、メンテナンス性も高いです。
ex:
Step 1:mixin.jsを先に定義します。
Step 3:あなたのvueファイルの中でmixinで定義されているものを使ってもいいです。
mixinsの中の方法を使います。
ルートの設定
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
個人的にはグローバルmixinはすべてのVueファイルにいくつかの共通の実例を追加することだと思います。
使用シーン:通貨単位、時間書式。これらは使っているページで使うとコードが多く重複しますので、全体的にこれらの例を混ぜるとコード量が減り、メンテナンス性も高いです。
ex:
Step 1: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
Step 2:main.jsファイルの中にあります。
import mixin from './mixin'
Vue.mixin(mixin)
全体的に混入しました。mixinはsがありません。Step 3:あなたの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>
これで大局的に混入して完成し、気になる読者も局部混入を試みることができます。以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。