vue封装背景知识小插曲之插槽slot的用法

一 什么是插槽slot，都可以干啥？

直白点说就是子组件使用<slot> 先占了个地方，然后当父组件使用子组件的时候，在对应地方写上自己需求的代码即可，达到了子组件中部分代码的复用。

// 举个例子    
//子组件中
<template>
    <div class='child'>
         // 此处子组件部分代码省略
        <slot></slot>
    </div>
</template>



// 父组件中使用子组件
<template>
    <div>
        <Child>
           <div> 八八八八 <div>
        </Child>
    </div>
</template>


// 父组件中使用子组件
<template>
    <div>
        <Child>
           <el-table> <el-table>
        </Child>
    </div>
</template>


// 父组件中使用子组件
<template>
    <div>
        <Child>
           <el-select> <el-select>
        </Child>
    </div>
</template>



//  从上面例子可以看出，在父组件中，预留插槽的位置可以放任何东西，达到了子组件中部分代码复用的效果

二 常见的插槽用法

一 插槽的默认值：我们定义插槽的时候，可以在子组件的插槽上放默认值，如果父组件中传值了，那么使用传的值，如果没有传值，则使用默认值

//  子组件中    定义插槽，并写上默认值
<button type="submit">
  <slot>
    提交<!-- 默认内容 -->
  </slot>
</button>



// 父组件没有给插槽提供内容的时候
<SubmitButton /> 
<!-- 这个时候按钮的名字是   提交  -->


// 父组件给插槽提供内容
<SubmitButton>  保存 </SubmitButton>
<!-- 这个时候按钮的名字是  保存    -->

具名插槽 ：有名字的插槽，可以精准的将代码插到子组件相应的位置

//  子组件   BaseLayout
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>



// 父组件
<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>

  <template v-slot:default>
    <!-- main 插槽的内容放这里 -->
  </template>

  <template v-slot:footer>
    <!-- footer 插槽的内容放这里 -->
  </template>
</BaseLayout>




// 在父组件中，v-slot 有对应的简写：  #，也就是说代码可以写成如下模样
<BaseLayout>
  <template #header>
    <!-- header 插槽的内容放这里 -->
  </template>

  <template #default>
    <!-- main 插槽的内容放这里 -->
  </template>

  <template #footer>
    <!-- footer 插槽的内容放这里 -->
  </template>
</BaseLayout>

作用域插槽：可以让父组件使用插槽时的内容能够访问子组件中的数据

// 参考： https://blog.csdn.net/qq_44858608/article/details/124736943
// 这篇文章写的很详细，我们提炼一下

// 如何通过作用域插槽让父组件能访问到子组件的内容？我们先看普通的情况


// 子组件 ---------Category
<template>
	<div class="category">
		<ul>
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </ul>
	</div>
</template>
 
<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>



// 父组件
// 这个时候，当使用了子组件<Category>后，子组件的内容会被渲染出来，如下图
<template>
	<div class="container">
		<Category title="游戏"></Category>
	</div>
</template>
 
<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{ Category },
	}
</script>
 

// 那作用域插槽怎么用?(如何通过作用域插槽让父组件能访问到子组件的内容)

// 子组件，绑定了数据，目的是为了传给父组件
<template>
	<div class="category">
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>
 
<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>



// 父组件
// 接收到数据，并使用数据
<template>
	<div class="container">
 
		<Category title="游戏">
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>
	</div>
</template>
 
<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{ Category },
	}
</script>

// 既然插槽作用域，能够让父组件拿到子组件插槽中的作用，但是我们可以直接写，那他存在的意义是什么呢？


// 我们可以拿到子组件给我们的数据，然后在父组件自由发挥样式，数据有了，样式可以自由发挥很多种。用于展示不用的样式效果。


//  沿用上面的子组件


// 父组件
<template>
	<div class="container">
 
		<Category title="游戏">
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>
 
		<Category title="游戏">
			<template scope="{games}">
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>
 
		<Category title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>
	</div>
</template>
 
<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{ Category },
	}
</script>