1.スロットは何ですか
簡単に言えば、コンポーネントの内部に1つ以上の空きスペース(スロット)が残っており、対応するテンプレートコードを入れることができます.スロットの登場により、コンポーネントがより柔軟になります.element-ui、iviewなどのコンポーネントライブラリでは、スロットの役割が十分に利用されています.
2.スロットの区分
匿名スロット:名前のないスロット、つまりデフォルトのスロットです.名前付きスロット:名前を特定するスロットがあり、この名前でこのスロットを見つけることができます.役割ドメインスロット:はっきり言ってコンポーネント上の属性で、コンポーネント要素の内部で使用します.そう言えば理解できないかもしれませんが、後で説明します.
3.匿名スロット
あまり話さないで、まずコードをつけます.

//      ，           
Vue.component("component-one",{
	template:`
		

			
Hellp
			
		
		`
})
//           
<component-one></component-one>
//    ：
<div>
	<p>Hellp</p>
</div>
=====================================
//           
<component-one>
	  
</component-one>
//    ：
<div>
	<p>Hellp</p>
	  
</div>

これが匿名スロットで、この位置は私たちが書いた内容で完全にカバーされます!通常、スロットに物を挿入するのはtemplateラベルの形で、規範的に見えます.

//    component-one  template    
<component-one>
	<template>  </template>
</component-one>

4.名前付きスロット
スロットに名前を付けて、名前に対応して内容を挿入します.名前がないのは上の匿名のスロットで、デフォルトのスロットとも呼ばれています.

//    
Vue.component("component-two",{
	template:`
		

			
  
			
			
			
		
		`
})
//    
<component-two>
	<template v-slot:"one">
		  one    
	</template>
	<template v-slot:"two">
		  two    
	</template>
	<div>
		    (  )  
	</div>
</component-two>
//    
<div>
	  
	  one    
	  two    
	    (  )  
</div>

vue>=2.6.0バージョンで、slotとslot-scopeの代わりにv-slotを使用します.
注意4点

スロットの内容は、テンプレートパッケージ

を使用する必要があります.

名前を指定しないテンプレートを匿名スロットに挿入するには、名前付きスロットを使用することをお勧めします.コード追跡が便利で、直感的にはっきりしています.

匿名スロットには、非表示の名前「default」

があります.

スロット付きv-slot:

と略すことができます.
5.スコープスロット
さっきお話ししたように、役割ドメインスロットは、コンポーネントのプロパティがコンポーネント要素内で使用されています.まず例を見てみましょう

//    
<div class="child-page">
        <h1>{{title}}   </h1>
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
</div>
    props: {
        title: {
            type: String
        }
    }
//    
<child-page  //   （ ）
    :title="'  '"
  >
    <template #header>  //     （ ）
      <p>{{title}}</p>   //      
    </template>
    <template #footer>
      <p>  </p>
    </template>
    <template #body>
      <p>  </p>
    </template>
  </child-page>

親コンポーネントからコンポーネント内部に渡されるスロットの内容は、サブコンポーネントによってコンパイルされ、スロットの役割ドメインはサブコンポーネントによって決定されます.したがって、スロットの内容を動的に変更する必要がある場合は、サブコンポーネントを親コンポーネントに渡す必要があります.
使用する必要がある場合は、次のようにします.

//    
<div class="child-page">
        <h1>{{title}}   </h1>
        <slot name="header" :say:"title"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
</div>
    props: {
        title: {
            type: String
        }
    }

//    
<child-page
    :title="'  '"
  >
    <template #header v-slot:header="say">
      <p>{{say}}</p>   //{"say":  }
    </template>
    <template #footer>
      <p>  </p>
    </template>
    <template #body>
      <p>  </p>
    </template>
  </child-page>

これがコンポーネントのプロパティです.titleはコンポーネント要素内のスロットで=>役割ドメインスロットを使用できます!!
まとめ:親コンポーネントはサブコンポーネントに渡され、propsが受信すると、スロットslotはバインド属性伝達パラメータを介して親コンポーネントに返され、テンプレートコードでもデータでも制御権は親コンポーネントの手に完全に握られます.
2019-11-19久しぶりにいくつかの博文を书いて、后で毎日少しのものを书くことを坚持して、自分に理解するのがもっと良くて、顽张ります!https://www.jianshu.com/p/b0234b773b68