こんにちは。
最近Vue.jsに触れる機会が多くなってきまして、つい先日にVue.jsのslotというものを使いました。
そのときにslotについて調べてみたのでちょっとまとめて書いてみようと思います。
基本的にはVue.jsの公式ページを参考にしています。
また、今回のslotはVueのコンポーネント内で使用するもなのでコンポーネントが何なのかを知っているくらいの知識がある方を対象としております。もしVueのコンポーネントについてまだなにかわからないなーって方は前にVueコンポーネントについての記事を書いてみたのでそちらをお読みになってみてください！！
【Vue.js】コンポーネントの使い方を勉強してみたので書いてみる
こちらの記事がわかりにくわー！！って方は公式をどうぞ笑
Vueのslotとは？？
まず私が”slot”と聞いてこの言葉からどんなものなのか、すぐにイメージをすることが出来ませんでした。
そこでまず”slot”という言葉自体の意味をGoolge先生に聞いてみました。
私はフレームワークで使用できるメソッドや機能などは名前の意味を調べてどのような目的で用意されているのかをよく調べます。
ってことで今回も同様に言葉の意味から調べてみました。
Goolge先生でslotの意味を調べてみた
ちなみにweblio辞書で調べてみました。
以下引用です
溝(みぞ)、細長い小さい穴、(自動販売機・公衆電話機などの)料金差し入れ口、(組織・計画・表などの中の)位置、場所、(テレビ・ラジオなどの)時間帯
んーー…
なるほどわからんですね。
全然関係がないようです。
公式ページでslotを調べてみた
weblio辞書で言葉の意味を調べてもわからなかったので、素直に公式ページのslotのページを読んでみます。
以下引用です。
Vue には Web Components spec draft にヒントを得たコンテンツ配信 API が実装されており、
<slot>要素をコンテンツ配信の受け渡し口として利用します。
ほーー…
なんか何を言ってるかあんまりわかんないけど”コンテンツ”と”受け渡し口”がキーワードな気がしました。
このキーワードからVueのコンポーネントにコンテンツを渡すことが出来るのでは？となりました。
slotとはなんぞやの自分なりの結論
ごにょごにょネットで調べていくうちに自分なりに結論が出ました。
まず、Vueのコンポーネントは例えば”my-button”という名前のコンポーネントを作成したとしたら
<my-button></my-button>
のようにHTMLタグのように使うことが出来ます。
普通のHTMLタグでしたらこのタグの中に文字列を入れたり、または更にHTMLタグを入れ子にすると思います。
しかし、Vueのコンポーネントで使用するこのタグはタグ内に何を書いても動作することは出来ません。
そこでslotを使うことによってVueコンポーネントのタグ内に記述した内容をコンポーネント内の任意の位置に表示させることが出来ます。
文字だけではイメージしにくいと思うので実際に書いて見ます。
slotの使い方
先程ちらっと出てきた”<my-button></my-button>”を例に書いてみます。
このコンポーネントは基本的にはただボタンを作るだけのもの。slotを使ってアイコンもつけられるようにします。
実際のコード
<template>
<button class="btn">
<slot></slot>
{{ content }}
</button>
</template>
<script>
module.exports = {
props: ["content"]
}
</script>
<style>
.btn {
padding: 3px 5px;
background: #fff;
border-radius: 2px;
color: #252525;
}
</style>
HTMLで使う。
まずは作成したコンポーネントを普通に使ってみます。
<my-button v-bind:content="'Save'"></my-button>
“<my-button></my-button>”コンポーネントのプロパティ（content）に文字列を渡してボタンを生成します。
結果は以下のように普通のボタンが生成されます。
次にslotを使っているので、タグ内にアイコンを入れてみたいと思います。
<my-button :content="'hoge'">
<i class="fas fa-save"></i>
</my-button>
作成したコンポーネントのタグの中にfontawesomeのiタグを入れました。
結果は以下のようになります。
コンポーネントタグ内に記述した内容が表示されました。
Vueのコンポーネントは本来コンポーネントタグ内に記述したコンテンツは表示されないのですが、slotを使うことにより表示されるようになります。
コンポーネントにコンテンツを渡してslotが受け取る、つまりslotは”コンテンツの受け渡し口”になっているということです。
おまけ
フォールバック
Vueのslotには渡されるコンテンツが無いときに表示するコンテンツを予め用意しておくことができます。つまりデフォルトですね。
使い方はかんたんで以下のようになります。
<template>
<button class="btn">
<slot>Submit</slot>
{{ content }}
</button>
</template>
<script>
module.exports = {
props: ["content"]
}
</script>
<style>
.btn {
padding: 3px 5px;
background: #fff;
border-radius: 2px;
color: #252525;
}
</style>
slot内にデフォルトに設定したいコンテンツを入れておくだけです。
これでコンテンツが渡されなかったときは’Submit’が表示されます。
まとめ
以上がslotの基本的な使い方でした。
使って理解してみればそんなに難しい内容ではなかったと思っています。
今回は基本的な使い方だけでしたが、あらゆる場面が想定された使い方がslotには用意されています。それらは公式ドキュメントを見ると紹介がされています。
これらのslotの基本的な使い方を把握していれば公式ドキュメントを読みながら柔軟に開発が出来ると思います。
拙い文章でしたが最後までよんでいただきありがとうございました！！
参考
- https://jp.vuejs.org/v2/guide/components-slots.html
- https://jp.vuejs.org/v2/guide/components.html
- https://ejje.weblio.jp/content/slot
