- 開発技術
VueJSのslotを紹介
- #VueJS
はじめに
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
VueJS アプリケーションでは、コンポーネントの多くに共有 UI 要素がある状況に遭遇したことがあるはずです。Slotは反復的なコードの作成を制限するために作成されました。
Web サイトは 多数のページで構成されており、各ページには同じヘッダーとサイドバーがあり、コンテンツのみが変更されるとします。 そこから、最初の２つのコンポーネント、<Header /> と <Sidebar />を作成します。
|
1 2 3 4 5 6 7 8 9 |
<template> <div> <Header /> <div> <SideBar /> <!-- Page Content Herre --> </div> </div> </template> |
サイトの各ページで上記のようにフレームをコピーして、コンテンツのみを変更すると、ソースがこのような形になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Homepage <template> <div> <Header /> <div> <SideBar /> <HomePage /> </div> </div> </template> // About page <template> <div> <Header /> <div> <SideBar /> <AboutPage /> </div> </div> </template> |
このコード重複の問題を解決するには、VueJS が提供するslotを使用します。
使い方
まず、次のように <PageLayout /> というコンポーネントを定義します。
|
1 2 3 4 5 6 7 8 9 10 |
// PageLayout <template> <div> <Header /> <div> <SideBar /> <slot /> </div> </div> </template> |
ここで、 <slot /> セクションは空のボックスとして機能し、そこに任意のタイプのインターフェイスを配置できます。具体的には、次のような特定のページのコンテンツがここに追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Homepage <template> <PageLayout> <HomePage /> </PageLayout> </template> // About page <template> <PageLayout> <AboutPage /> </PageLayout> </template> |
<PageLayout> と </PageLayout> の間のコードは、<PageLayout /> コンポーネントの <slot/> を宣言した位置に自動的に配置されます。 さらに、 <PageLayout /> コンポーネントでは、デフォルト値を設定することもできます。
|
1 2 3 4 5 6 7 8 9 |
<template> <div> <Header /> <div> <SideBar /> <slot>Default content</slot> </div> </div> </template> |
コンテンツを何も追加せずに上記の <PageLayout /> コンポーネントを使用すると、定義したデフォルトのコンテンツが自動的に使用されます。これがテキストの「Default content」です。
複数のslotがある場合は、nameで区別できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="model"> <div class="w-64 border shadow-md rounded"> <div class="border-b p-2"> <slot name="header" /> </div> <div class="px-2 py-4"> <slot /> </div> <div class="border-t p-2 flex justify-end"> <slot name="footer" /> </div> </div> </div> </template> |
使用する時、そのコンポーネント モデルをこのように呼びます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <Model> <template v-slot:header> <p>Login</p> </template> <template> <label>Email</label> <input type="email" required /> <label>Password</label> <input type="password" required /> <input type="checkbox" /> <span>Remember me</span> </template> <template v-slot:footer> <button>Cancel</button> <button>Login</butotn> </template> </Model> </template> |
前述の v-slot の使用に加えて、VueJS はより簡潔な記述方法も提供します。これは、単語 v-slot を # 文字で置き換えることです。
|
1 2 3 4 5 6 7 8 9 10 |
// v-slot <Model> <template v-slot:header> </template> </Model> // # <Model> <template #header> </template> </Model> |
さらに、slotのロジックを再利用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<template> <div class="model"> <div class="w-64 border shadow-md rounded"> <div class="border-b p-2"> <slot name="header" :testString="testString" /> </div> <div class="px-2 py-4"> <slot /> </div> <div class="border-t p-2 flex justify-end"> <slot name="footer" :testClick="testClick" /> </div> </div> </div> </template> <script> export default { data() { return { testString: 'test' } }, methods: { testClick() { console.log('Click'); } } } </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <Model> <template v-slot:header="{ testString }"> <p>{{ testString }}</p> </template> <template> Content </template> <template v-slot:footer="{ testClick }"> <button @click="testClick">Click</button> </template> </Model> </template> |
それでは、以上です。
最後までご覧いただきありがとうございました。
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
