VueJSでコンポーネント自体をslot要素で渡す方法とそのサンプルコードについて書きました。
目次
コンポーネント自体を渡す方法 – slot要素
コンポーネント自体を渡すには<slot>要素を用います。
https://jp.vuejs.org/v2/guide/components-slots.html
コンポーネントを受け取る側は<slot>要素を用います。
<div>
<slot></slot>
</div>コンポーネント渡す側はこんな感じ。
通常のHTMLタグのように渡される側のコンポーネントの中に渡したいコンポーネントを書くだけです。
<渡される側のコンポーネント>
<渡したいコンポーネント />
</渡される側のコンポーネント>slotを用いてコンポーネント自体を渡せるようにすることで、レイアウト・枠組みのみを設定する枠組みコンポーネントを作成し、枠組みコンポーネントにコンポーネントを渡して中身を取り替えたりが可能です。
次の章は枠組みコンポーネントのサンプルコードについてです。
コンポーネントを渡すサンプルコード
枠組みコンポーネントにコンポーネントを渡すサンプルコードです。
childComponentは通常のコンポーネントで白背景で文字表示するだけです。
baseComponentはコンポーネントを受け取れる枠組みコンポーネント。入れ物・枠組みのような役割で緑背景の中に受け取ったコンポーネントを描画します。
rootComponentが全体を束ねるコンポーネントです。ここでbaseComponentにchildComponentを渡します。
// baseComponentに渡す通常のコンポーネント
var childComponent = Vue.component(
'child-component', {
template: `
<p style="background-color: white; text-align: center;">Child component</p>
`
}
)
// 入れ物となるコンポーネント
var baseComponent = Vue.component(
'base-component', {
template: `
<div>
<h4>Base component</h4>
<div style="background-color: green; padding: 30px;">
<slot></slot>
</div>
</div>
`
}
)
// baseComponent、childComponentを使って描画をするコンポーネント
var rootComponent = new Vue({
el: '#root',
components: [
'child-component',
'parent-component',
],
template: `
<div>
<h2>Root component</h2>
<hr />
<base-component>
<child-component></child-component>
</base-component>
</div>
`
})実行結果はこんな感じになります。コンポーネントの中にコンポーネントが描画されていることが分かります。
複数コンポーネントを渡すには？ – <slot name=～>
複数の場合は、受け取る側で<slot name=”名前”>を指定することで名前付きで複数設定できます。
コンポーネント渡される側は<slot name=～>要素を用います。
<div>
<slot name="名前1"></slot>
<slot name="名前2"></slot>
</div>使う側はこんな感じの形式です。templateタグにv-slot:名前指定することで複数コンポーネントを名前付きで渡せます。
<枠組みコンポーネント>
<template v-slot:名前1>
<渡したいコンポーネント1 />
</template>
<template v-slot:名前2>
<渡したいコンポーネント2 />
</template>
</枠組みコンポーネント>複数コンポーネントを渡す場合のサンプルコード
枠組みコンポーネントに複数のコンポーネントを渡すサンプルコードです。
childComponentはテキストをpropsで受け取る通常のコンポーネントで、白背景で文字表示するだけです。
baseComponentはleft_component, right_componentの2つのコンポーネントを渡せるコンポーネント。入れ物・枠組みのような役割でそれぞれ青・緑背景の中に渡されたコンポーネントを描画します。
rootComponentが全体を束ねるコンポーネントです。ここでbaseComponentにchildComponentを2つ渡します。
// baseComponentに渡すコンポーネント
var childComponent = Vue.component(
'child-component', {
props: [
'text'
],
template: `
<div style="background-color: white; text-align: center;">{{ text }}</div>
`
}
)
// 入れ物となるコンポーネント
var baseComponent = Vue.component(
'base-component', {
template: `
<div>
<h4>Base component</h4>
<div style="float: left; width: 40%; padding: 5%; background-color: blue;">
<slot name="left_component"></slot>
</div>
<div style="float: left; width: 40%; padding: 5%; background-color: green;">
<slot name="right_component"></slot>
</div>
</div>
`
}
)
// baseComponent、childComponentを使った描画をするコンポーネント
var rootComponent = new Vue({
el: '#root',
components: [
'child-component',
'parent-component',
],
template: `
<div>
<h2>Root component</h2>
<hr />
<base-component>
<template v-slot:left_component>
<child-component text="Child Component 1" />
</template>
<template v-slot:right_component>
<child-component text="Child Component 2" />
</template>
</base-component>
</div>
`
})結果はこんな感じになります。コンポーネントの中で2つコンポーネントが描画されていることが分かります。
