[Vue] 7. Vue素子開発プレミアム編-8)Slot

7733 ワード
vue テキストリンク

Slot


プロジェクトを行う過程で、非常に似たUIを持つ画面もあり、一部しか使用しないことが多い.
エレメント内で別のエレメントを使用する場合、すなわち、サブエレメントの特定のUI部分を再定義する.
// SlotModalLayout.vue
<template>
  <div class="modal-container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="main"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
v-slot:headerの場合、テンプレートに含まれるhtmlコードはslotModalLayoutのname=「header」セクションに置き換えられます.
// SlotUseModalLayout.vue
<template>
  <modal-layout>
    <template v-slot:header>
      <h1>팝업 타이틀</h1>
    </template>
    <template v-slot:main>
      <p>팝업 컨텐츠 1</p>
      <p>팝업 컨텐츠 1</p>
    </template>

    <template v-slot:footer>
      <button type="button">닫기</button>
    </template>
  </modal-layout>
</template>

<script>
import SlotModalLayout from "./SlotModalLayout.vue";

export default {
  components: { "modal-layout": SlotModalLayout },
  data() {
    return {};
  },
};
</script>

// index.js
const routes = [
  	...,
	{
    	path: "/slot",
    	name: "SlotUserModalLayout",
    	component: () =>
	      import(/* webpackChunkName: "about" */ 	"../views/SlotUseModalLayout.vue"),
	},
]
配列内のすべての繰り返し回数がminTimes以上の数値
SWR