Vue.jsのslot【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのslotについて、簡単に解説していきます。

slot

Vue.jsにはslotという差し込みが可能です。

具体的には、親コンポーネント側から子コンポーネント側のテンプレートに差し込めます。

<div id="app">
  <hoge>差し込み</hoge>
</div>
var app = new Vue({
  el: '#app',
  components: {
    hoge: {
      template:'<div>テスト結果:<slot>差し込まれる</slot></div>'
    }
  }
});

上記のコードでは、子コンポーネント側でslotタグを使うことで、親コンポーネント側のコンポーネントのタグで囲まれた部分が差し込まれます。

名前付きslot

複数のslotコンテンツがある場合には名前を付けます。

具体的には、親コンポーネント側と子コンポーネント側で同じ名前を付けます。

<div id="app">
  <hoge>
    <template slot="firstSlot">差し込み1</template>
    <template slot="secondSlot">差し込み2</template>
  </hoge>
</div>
var app = new Vue({
  el: '#app',
  components: {
    hoge: {
      template:'<div>テスト結果:<slot name="firstSlot">1</slot><slot name="secondSlot">2</slot></div>'
    }
  }
});

上記の例では、firstSlotとsecondSlotという二つのslotコンテンツを作っています。

スコープ付きslot

slotでは、子コンポーネントから親コンポーネントにデータを渡せます。

具体的には、slot-scope属性をというスコープ付きslotを利用することになります。

<div id="app">
  <hoge><slot slot="default" slot-scope="props">{{ props.hogename }}</hoge>
</div>
var app = new Vue({
  el: '#app',
  components: {
    hoge: {
      data: function() {
        return {
          hogename: 'hoge'
        }
      },
      template:'<div>テスト結果:<slot :hogename="hogename"></slot></div>'
    }
  }
});

上記のコードの例では、子コンポーネントのhogenameを親コンポーネントにprops.hogenameで渡せるようにしています。