持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

书接上回，说竹板这么一打呀，别的咱不说，这次来说一说vue插槽，这个小卡拉米。

<slot>插槽：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递信息。

插槽具体可以分为三大类

1. 默认插槽
2. 具名插槽
3. 作用域插槽

使用方法

1. 默认插槽

父组件中：
         <Shop>
               <div>html结构</div>
         </Shop>
子组件：Shop
          <template>
	          <div>
		          <!-- 定义插槽 -->
		          <slot>插槽默认内容</slot>
	          </div>
          </template>

2. 具名插槽: 父组件指明放入子组件的哪个插槽slot="footer",如果是template可以写成v-slot:footer

父组件中：	
        <Shop>
		<template slot="center">
			<div>
				html结构
			</div>
		</template>
		<template v-slot:footer>
			<div>
				html结构
			</div>
		</template>
	</Shop>
子组件中:
     <template>
	<div>
		<!-- 定义插槽 -->
		<slot name="center">插槽默认内容</slot>
		<slot name="footer">插槽默认内容</slot>
	</div>
</template>

3. 作用域插槽： scope用于父组件往子组件插槽放html结构接收子组件的数据

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

例如：(da数据在Shop组件中，但使用数据所遍历出来的结构由App组件决定)

父组件中：
        <Shop>
		<template scope="scopeData">
                <!-- 生成的是ul列表 -->
			<ul>
			<li v-for="g in scopeData.da" :key="g">{{g}}</li>
			</ul>
		</template>
         </Shop>
        
         <Shop>
		<template slot-scope="scopeData">
                <!-- 生成的是h4列表 -->
			<h4 v-for="g in scopeData.da" :key="g">{{g}}</h4>
		</template>
         </Shop>
   子组件中：
               <template>
	              <div>
		         <slot :da="da"></slot>
	             </div>
              </template>


       <script>
	   export default {
    	   	props:['title'],
		data() {
    	   		return {
	       		da:['喜羊羊','美羊羊','红太狼']
	   		}
	           }
	       }
       </script>   

实战代码演练

父组件app.vue

<template>
  <div id="app">
   <UserDefined v-slot:lal>
	   <div>
		   喜羊羊美羊羊懒羊羊沸羊
		   慢羊羊软绵绵红太狼灰太
		   别看我只是一只
		   绿草因为我变的更
		   天空因为我变的更蓝
		   白云因为我变的柔软
		   别看我只是一只羊
		   羊儿的聪明难以想像
		   天再高心情一样奔放
		   每天都追赶太阳
	   </div>
   </UserDefined>
  </div>
</template>

<script>
import UserDefined from './components/UserDefined.vue'

export default {
  name: 'app',
  components: {
	UserDefined
  }
}
</script>

子组件UserDefined：

<template>
	<div class="h">
		<slot name="lal"></slot>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				
			}
		}
	}
</script>

<style>
.h{
	height: 50vh;
	width: 50vw;
	background-color: aquamarine;
}
</style>

效果展示