「Vue.js」の「カスタムディレクティブ」を学ぶ
今回は「Vue.js」の「カスタムディレクティブ」について学んでいきたいと思います。
「v-if」や「v-bind」など「v-～」から始まるものがディレクティブですが、「オリジナルの機能を持ったディレクティブ」を作れる機能が「カスタムディレクティブ」です。
「カスタムディレクティブ」の種類と作り方
「Vue.js」の「カスタムディレクティブ」には2種類あり、「コンポーネント内」だけで利用できる「ローカルカスタムディレクティブ」とグローバル環境で利用できる「グローバルカスタムディレクティブ」の2種類があります。
それでは、まず「ローカルカスタムディレクティブ」について見ていきたいと思います。
ローカルカスタムディレクティブ
プログラムを書いてみると、
<div id="app">
<my-component></my-component>
</div>
<script>
const app = Vue.createApp();
app.component('my-component', {
template: '<div><p v-abc>MyComponent</p></div>',
directives: {
'abc': {
mounted: function (el) {
el.innerHTML = 'abc';
}
}
}
});
app.mount('#app');
</script>
のようになります。このプログラムを実行すると、
のようになります。
「コンポーネント」の定義に「directives」を指定すると、そのコンポーネント内だけで使える「カスタムディレクティブ」を作ることができます。
directives: {
'ディレクティブ名': {
フック関数: function (引数) {
処理の内容
}
}
}
今回は「abc」という名前の「カスタムディレクティブ」を作成しているため、「v-abc」と記述すると、「mounted」された時に定義された関数が実行されます。
グローバルディレクティブ
「コンポーネント」を問わずどこからでも利用できる「グローバルなディレクティブ」を作ることができます。
プログラムを書いてみると、
<div id="app">
<my-component></my-component>
<my-component2></my-component2>
</div>
<script>
const app = Vue.createApp();
app.component('my-component', {
template: '<div><p v-abc>MyComponent</p></div>'
});
app.component('my-component2', {
template: '<div><p v-abc>MyComponent2</p></div>'
});
app.directive('abc', {
mounted: function (el, binding, vnode) {
el.innerHTML = 'abc';
}
});
app.mount('#app');
</script>
のようになります。このプログラムを実行すると、
のようになります。
「Vueインスタンス」の「directiveメソッド」を利用すると「グローバルディレクティブ」を定義することができます。
const app = Vue.createApp();
app.directive('ディレクティブ名', {
フック関数: function (引数) {
処理の内容
}
});
「フック関数」部分からは「ローカルカスタムディレクティブ」と同様に定義していくことができます。
今回は「カスタムディレクティブ」について学んできました。
独自機能を「カスタムディレクティブ」で利用することができるのは便利ですが、定義した「カスタムディレクティブ」をどのように管理していくのかを考えていくことも重要だと感じました。
まだ具体的な「使いどころ」が見えないためこれから探していきたいと思います。