Vue.js を１から学んでみた。にて書いてきましたが、
長くなり編集しにくくなってきたので、分割しました（こんなやりかたしないのかな？知りたい。）
10-1. 概要
export default{に定義されている、data、componentsなどは総じてオプションと呼ばれる。
sample.vue
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
// dataはオプションの1つ
data: function() {
return {
name: "次郎"
}
},
// componentsはオプションの1つ
components: {
HelloWorld
}
}
</script>
これらのオプションをJavaScriptファイルにまとめて、複数のvueファイルで使い回す仕組みをミックスインという。
10-2. 基本的な使い方
新しいJavaScriptファイルを作成し、共有したいオプションを実装する。
（特に何もしない）main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
capitalizeMixIn.js
// 実際のミックスインの実装
export const capitalizeMixIn = {
props: {
message: {
type: String
},
},
data: function() {
return {
msg: this.message
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
（特に何もしない）App.vue
<template>
<div>
<Job message="system engineer"></Job>
<Job message="monotas"></Job>
</div>
</template>
<script>
import Job from "./components/Job.vue";
export default {
components: {
Job: Job
}
}
</script>
Job.vue
<template>
<div>
{{ msg | capitalize }}
</div>
</template>
<script>
// mixinの取り込み
// '@'はsrcをルートとして定義できる便利なもの
import { capitalizeMixIn } from "@/capitalizeMixIn"
export default {
// ミックスインの設定
mixins: [capitalizeMixIn]
}
</script>
結果
オプションが被った場合
ミックスインのオプションと、ミックインを指定しているコンポーネントで、オプションが被った場合は、コンポーネントが優先される。
ただし、ライフサイクルメソッドについては、ミックスインもコンポーネントも両方とも実行される。ミックスイン→コンポーネントの順番で実行される。
Job.vue
<template>
<div>
{{ msg | capitalize }}
</div>
</template>
<script>
import { capitalizeMixIn } from "@/capitalizeMixIn"
export default {
mixins: [capitalizeMixIn],
// ミックスインと同じキーのdataオプションを用意
data: function() {
return {
msg: "component message"
}
},
}
</script>
結果：コンポーネントが優先される
10-3. グローバル登録について
コンポーネントやカスタムディレクティブのように、グローバル登録はあるっちゃあ、ある笑
ただ、、、仮にライフサイクルメソッドを実装してしまうと全てのコンポーネントが展開された時に実行されてしまい危険w
なので、載せないでおく。
実現したい内容が他の方法ではどうしてもできない場合に調べようと思うので割愛。