Vueのスロット機能

Vueのスロット機能について、備忘録としてこちらにまとめます。

親コンポーネント側から子コンポーネントに一部を差し込む機能がスロット

親コンポーネント側から子コンポーネントに一部を差し込む(slotタグ有り)

  <div id="app">
    <comp-child>
      フォールバックコンテンツ
    </comp-child>
  </div>

Vue.component('comp-child', {
  template: `
    <div class="comp-child">
      <slot>デフォルトコンテンツ</slot>
    </div>
  `
});

new Vue({
  el: '#app'
});

ブラウザには、以下のように表示される。(親コンポーネントの[フォールバックコンテンツ]が適用される)

gyazo.com

親コンポーネント側から子コンポーネントに一部を差し込む(slotタグ無し)

  <div id="app">
    <comp-child>
      フォールバックコンテンツ
    </comp-child>
  </div>

Vue.component('comp-child', {
  template: `
    <div class="comp-child">
      デフォルトコンテンツ
    </div>
  `
});

new Vue({
  el: '#app'
});

ブラウザには、以下のように表示される。(子コンポーネントの[デフォルトコンテンツ]が適用される)

gyazo.com

親コンポーネント側から子コンポーネントに一部を差し込む

  <div id="app">
    <comp-child>
      フォールバックコンテンツ
    </comp-child>
  </div>

Vue.component('comp-child', {
  template: `
    <div class="comp-child">
    </div>
  `
});

new Vue({
  el: '#app'
});

ブラウザには、以下のように表示される。(子コンポーネントが適用される)

gyazo.com

親コンポーネント側から子コンポーネントに一部を差し込む

  <div id="app">
    <comp-child>
    </comp-child>
  </div>

Vue.component('comp-child', {
  template: `
    <div class="comp-child">
      <slot>デフォルトコンテンツ</slot>
    </div>
  `
});

new Vue({
  el: '#app'
});

ブラウザには、以下のように表示される。(親コンポーネントで[フォールバックコンテンツ]が設定されていないので、子コンポーネントでslotタグを設定しており、slotタグの中の部分が適用される。)
slotタグに定義した記述は、フォールバックコンテンツとして表示される。
フォールバックコンテンツ: ある機能や要素がサポートされていない場合に、代替えとして表示されるコンテンツのこと。