Slot插槽

• 父元件向子元件傳遞
• 父元件將內容分發到子元件
• slot插槽的值只讀，不能在子元件中修改
• slot插槽也可以作為元件之間的通訊方式

預設插槽

父元件中：使用Son元件
    <template>
        <Son>
           <ul> //子元件如果不定義插槽 這裡面的ul不起作用
    	    <li>我</li>
	    <li>愛</li>
	    <li>你</li>
   	   </ul>
        </Son>
    </template>

子元件中：
    <template>
        <div>
         <!-- 定義插槽 -->
           <slot>父元件中沒有內容就顯示這句話...</slot>
         </div>
     </template>
 

具名插槽

#兩種方式
`注意 v-slot：簡寫為 # 且 具名插槽需要用 template 包裹（元件不用 template 包裹）`
父元件中：使用Son元件  
  <template>
	<Son>
   	<h1 slot="demo1">迷死他<h2>
        <ul slot="demo2"> 
    	  <li>你</li>
          <li>愛</li>
 	  <li>我</li>
   	 </ul>
        </Son>     
  </template>
//第二種寫法 必須要加上template標籤
        <template v-slot:demo2>
          <ul> 
                <li>我</li>
                <li>愛</li>
                <li>你</li>
   	  </ul>
        </template>

子元件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="demo1">父元件中沒有內容就顯示這句話...</slot>
	       <slot name="demo2">父元件中沒有內容就顯示這句話...</slot>
            </div>
        </template>
 

作用域插槽

#資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。(son元件在father元件中使用，但是資料來源是Son元件本身，這時就需要在Son元件中用作用域插槽將資料傳輸給插槽的使用者)
`父元件中：`
方法一：
	<Son>
		<template scope="formSon"> 
		<!-- dataSource來子元件  -->
			<ul>
				<li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
			</ul>
		</template>
	</Son>
方法二：
	<Son>//第二種寫法
		<template slot-scope="formSon">
			<!-- 生成的是h4標題 -->
			<h4 v-for="(k,index) in dataSource" :key="index">{{k}}</h4>
		</template>
	</Son>

`子元件中：`
    <template>
        <div>
            <slot :dataSource="dataSource"></slot>
        </div>
    </template>  
	<script>
        export default {
            //資料在子元件自身
            data() {
                return {
                   dataSource:['lht','lht1','lht2','lht3']
                }
            },
        }       
    </script>            
 

應用場景示例

template中的插槽---具名插槽

#父元件中：father.vue
	#匯入子元件
import Son from './son.vue'    
<template>
  <Son>
    <template v-slot:www>
        <div>......</div> 
      //div中可以用來取父元件的值，存放到插槽再分發給子元件
    </template>
  </Son>
</template>    

#子元件中 son.vue 使用父元件中的插槽
<slot name="www"></slot>
//渲染後就出現父元件的結構內容