Vue.js Component Slot によるコンテンツ配信とハマりどころ #Vue.js

Vue.jsではコンポーネント内の要素に、親要素からコンテンツ(DOM的な)を投げ込む事が出来る。

slotによるコンテンツ配信

例えば以下の様なテンプレートのコンポーネントを考える。

var template = `
<div>
  <h2>私のコンポーネント!</h2>
  <slot></slot>
</div>
`;

const component = {
    template
}

親による表記が以下の様なケースでは

<body>
    <h1>私のアプリケーション！</h1>
    <my-component>
      <p>配信コンテンツその１</p>
      <p>配信コンテンツその２</p>
    </my-component>
</body>

以下の様なレンダリングが行われる。

<body>
    <h1>私のアプリケーション！</h1>
    <h2>私のコンポーネント!</h2>
    <p>配信コンテンツその１</p>
    <p>配信コンテンツその２</p>
</body>

name属性を使用して、複数のslotを使用する事も可能なよう。

最初はコレを、子テンプレートのtemplate内slotを単純に置換する類のものだと思っていた。

例えば以下の様なslot配信付きコンポーネント利用の記述を考えた場合、

<body>
    <h1>私のアプリケーション！</h1>
    <my-component>
      <p>配信コンテンツその１</p>
      <a @click="submit()">CLICK ME!</a>
    </my-component>
</body>

@click="submit()"のsubmitは親のスコープでの参照となる。

つまり親レベルでコンパイルされた結果が子コンポーネントに配信される。

この辺は「親コンポーネントが子コンポーネントの詳細を知るべきではない(注入に徹する)、的な考えに基づくものなのかなぁ…と思ったり。

あくまで「コンテンツを配信(注入)」するための機能として扱うのが良さそう。

んじゃあテンプレート注入するにはどうすれば良いんよ？って所になるけど、素直にid付きtemplateタグで注入とかするのが良さそう。