「Vue.js」の「ミックスイン」を学ぶ
今回は「Vue.js」の「ミックスイン」について学んでいきたいと思います。
「ミックスイン」は「コンポーネントの共通部分」を抜き出してさまざまな「コンポーネント」で利用できる機能です。
「コンポーネント間」で「共通部分」がある時に活躍してくれそうな機能ですね。
「ミックスイン」の仕組み
「ミックスイン」の仕組みは下図のようになります。
それぞれの「コンポーネント」から「ミックスイン」で定義されたオプションを利用することができます。
プログラムを書いてみると、
<div class="scripts">
<div id="app">
<component-a></component-a>
</div>
<script>
const mixin = {
data() {
return {
common: 'mixin data',
}
},
}
const app = Vue.createApp({});
app.component('component-a', {
mixins: [mixin],
data: function () {
return {
name: 'componentA'
}
},
template: '<button @click="displayData">HOME</button>',
methods: {
displayData: function () {
alert(`${this.common}-${this.name}`);
}
}
});
app.mount('#app');
</script>
</div>
のようになります。このプログラムを実行すると、
のようになります。
今回のプログラム作成で気付いたのですが、「Vue２」で利用できていた「Vue.component」は「Vue3」で使えないそうです。
理由は「Vue2」にあった「Vue.component」が「Vue3」で削除されためなんだそうです。
そのため「Vue3」では「Vue.createApp」を使う必要があります。
コンポーネントの「mixins」に「利用するミックスイン」を設定します。
1つのコンポーネントに「複数のミックスイン」を設定することもできます。
例えば、
<div class="scripts">
<div id="app">
<component-a></component-a>
</div>
<script>
const mixin = {
data() {
return {
common: 'mixin data',
}
},
}
const mixin2 = {
data() {
return {
common2: 'mixin2 data',
}
},
}
const app = Vue.createApp({});
app.component('component-a', {
mixins: [mixin, mixin2],
data: function () {
return {
name: 'componentA'
}
},
template: '<button @click="displayData">HOME</button>',
methods: {
displayData: function () {
alert(`${this.common}-${this.common2}-${this.name}`);
}
}
});
app.mount('#app');
</script>
</div>
のようになります。このプログラムを実行すると、
のようになります。
コンポーネントの共有
複数のコンポーネントから１つのミックスインを共有して使うこともできます。
例えば、
<div class="scripts">
<div id="app">
<component-a></component-a>
<span>|</span>
<component-b></component-b>
</div>
<script>
const mixin = {
data() {
return {
common: 'mixin data',
}
},
}
const app = Vue.createApp({});
app.component('component-a', {
mixins: [mixin],
data: function () {
return {
name: 'componentA'
}
},
template: '<button @click="displayData">HOME</button>',
methods: {
displayData: function () {
alert(`${this.common}-${this.common2}-${this.name}`);
}
}
});
app.component('component-b', {
mixins: [mixin],
data: function () {
return {
name: 'componentB'
}
},
template: '<button @click="displayData">HOME2</button>',
methods: {
displayData: function () {
alert(`${this.common}-${this.name}`);
}
}
});
app.mount('#app');
</script>
</div>
のようになります。このプログラムを実行すると、
のようになります。
「コンポーネントA」と「コンポーネントB」のどちらも「mixin」を利用していますね。
このように「共通機能」を「ミックスイン」として作成することで、複数のコンポーネントで「ミックスイン」の機能を利用することができます。
グローバルミックスイン
コンポーネントではなく、「グローバル環境」に「ミックスイン」を適用することもできます。
プログラムを作成してみると、
<div id="app">
<my-component></my-component>
</div>
<script>
const myMixin = {
created() {
console.log('call from myMixin');
}
}
const app = Vue.createApp({
mixins: [myMixin]
});
app.component('my-component', {
created() {
console.log('call from my-component');
},
template: `
<div>
<p>MyComponent</p>
</div>
`
});
app.mount('#app');
</script>
のようになります。このプログラムを実行すると、
のようになります。
ただし、「グローバルミックスイン」は影響が大きいため、利用する場合は注意が必要です。
ここまで「ミックスイン」について学んできましたが、「便利」な側面もある一方「ミックスイン」を増やし過ぎると管理が大変になるかもしれません。