[Vue.js]Vue.jsコンポーネントを作成していると、コンポーネント側の実装時点では配置できない要素などを利用する側から差し込みたい場合があります。コンポーネント内に配置されたテキストを表示する領域に、コンポーネントを利用する側のコンポーネントやアプリケーションから文字列を埋め込みたい場合などです。Vue.jsでは上記のように、子コンポーネントに配置されている要素の内部に親コンポーネントからコンテンツを埋め込むために「slot(スロット)」という機能が用意されています。本記事では、コンポーネントにコンテンツを埋め込むslot要素について紹介します。slot要素の使用例slot要素slot要素は子コンポーネント側で使用します。子コンポーネント側のHTMLテンプレートに以下のようにslot要素を配置します。slot要素の書式ここでは、div要素を配置した内部にslot要素を配置しています。</div>123<div><slot>ここにコンテンツを埋め込む</slot></div>上記のslot要素内の「ここにコンテンツを埋め込む」の部分に、親コンポーネント側からコンテンツを埋め込むことができます。親コンポーネント側では子コンポーネントのカスタム要素を配置し、その内部にコンポーネントに挿入するコンテンツを配置します。</custom-div>123<custom-div>親コンポーネントから埋め込むコンテンツ</custom-div>上記の例では、スロットを配置した「custom-div」という名前の子コンポーネントにコンテンツ(「親コンポーネントから埋め込むコンテンツ」)を埋め込んでいます。以下にslot要素を使用した子コンポーネントと、コンポーネントを利用する親アプリケーション(Vueインスタンス)の実装例を示します。window.prompt('コンポーネントに挿入するテキストを入力してください。window.prompt('コンポーネントに挿入するテキストを入力してください。');}}}).mount('#app')上記の例では、子コンポーネント側にコンテンツ挿入するためのslot要素を配置し、親のアプリケーションから文字列(テキスト)を挿入しています。親アプリケーション側ではボタンがクリックされた時に入力ダイアログボックスを表示して、子コンポーネントのslotに埋め込む文字列を変更できるようにしています。子コンポーネントに配置されたslot要素の内部に配置する文字列やHTML要素は、親コンポーネントからコンテンツが挿入されなければ初期値として表示されます。v-bind:button-text="buttonCaption"v-on:button-click="buttonClick"></hello-component>に変更({{insertText}}の記述を削除)すると出力されるHTMLは以下のようになります。<div>親コンポーネントから埋め込むコンテンツ</div>親コンポーネントからslot要素にコンテンツが差し込まれたら、子コンポーネントに記述された初期値は上書きされ、親コンポーネントから指定したコンテンツに置き換わる仕組みになっています。上記の例では、子コンポーネントのslot要素内に文字列を埋め込んでいますが、slot要素で埋め込むコンテンツは文字列以外にHTML要素や他のコンポーネントなどの任意のテンプレートコードを挿入することもできます。以下にコンポーネントのスロットに要素を埋め込む例を示します。customComponent}}).mount('#app')上記の例では、スロットを持つコンポーネント(子コンポーネント1)に別のコンポーネント(子コンポーネント2)を埋め込んでいます。親アプリケーションから埋め込むコンポーネント(子コンポーネント2)は内部にボタンを持ち、クリックイベントで現在の日付をダイアログボックスで表示します。[Vue.js]Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。[Vue.js]本記事では、Vue.jsのv-ifディレクティブについて紹介します。[Vue.js]前回の記事では.self修飾子を使用して、イベントが発生した要素だけでイベントが処理されるようにする方法について紹介しました。CLIでプロジェクトを作成する手順について紹介しました。[Vue.js]今回は、DOMの更新が完了した後に処理を行うことができるnextTickについて紹介します。[Vue.js]本記事では、Vue.jsで作成するアプリケーションの状態を定義するdataプロパティオプションについて紹介します。