vueスロットv-slot

1.slotとは

	<app>
        <menu-main></menu-main>
        <menu-sub></menu-sub>
        <div>
          <app-footer></app-footer>
        </div>
    </app>

を例にとると、に親コンポーネントのコンテンツとサブコンポーネントのテンプレートを混合すると、slotが使用され、このプロセスをコンテンツ配信と呼ぶ.slotを使用するコンポーネントには2つの特徴があります.1.作成時にセクションに何をマウントする必要があるか分かりません.このセクションの内容は、親コンポーネント呼び出しが必要な場合に決定されます.2.コンポーネントには独自のテンプレートがある場合があります.
コンパイルされたスコープ

//   
<child-component v-show="show">
     {
     {
     messge}}
</child-component>
//   child-component
<template>
	<h1>{
     {
     title}}</h1>
	<div>
		<slot></slot>
	</div>
</template>

上記のコードでは、親コンポーネントはchild-componentサブコンポーネントを参照し、{{message}}はサブコンポーネントのデータではなく、親コンポーネントのデータをバインドするスロットslotである.親コンポーネントの役割ドメインでコンパイルされます.v-showバインドのパラメータshowも親コンポーネントのデータです.{{title}}はサブコンポーネントのデータであるため,サブコンポーネントの役割ドメインでコンパイルされる.
slotの使い方
slotは、匿名スロット、名前付きスロット、役割ドメインスロットの3つに分類されます.
匿名スロットと名前付きスロット
コンポーネントで複数のスロットを使用する場合がありますが、親コンポーネントから入力された補間データが正しい位置にあることを認識するために、slotにnameを付けて区別することができます.たとえばコンポーネント

<div class="container">
  <header>
    <!--            -->
  </header>
  <main>
    <!--              -->
  </main>
  <footer>
    <!--            -->
  </footer>
</div>

3つのスロットが必要です.私たちはこのように定義することができます

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
    //  
    <slot name="default"></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

これらのname付きスロットは、名前付きスロットと呼ばれます.nameが付いていない()匿名スロットと呼ばれています.
親要素呼び出し:

<base-layout>
//      
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
//      
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
//      
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

1つの要素でv-slot命令を使用し、v-slotのパラメータの形式でその名前を提供し、現在