More than 5 years have passed since last update.

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

Posted at 2016-08-02

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タグで注入とかするのが良さそう。