Vue 子コンポーネントにHTML要素を渡す

勉強したことメモ。

子コンポーネントにHTML要素やinnerTextを渡したい場合、slotを利用できる。

例えば、

<header-component>
    <h1 slot="header">ここから<div>div要素も含めて</div>ここまで。</h1>
</header-component>

のように定義すると、子コンポーネントから<slot name="header"></slot>とすることで、要素を差し替えることができる。

  Vue.component('header-component',{
    template: '<div><slot name="header"></slot></div>'
  })

上記の場合、出来あがりのDOMは

<div><h1>ここから<div>div要素も含めて</div>ここまで。</h1></div>

いつもprops脳になってしまうので、メモしておきます。