vue封装背景知识小插曲之插槽slot的用法
一 什么是插槽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>
作用域插槽：可以让父组件使用插槽时的内容能够访问子组件中的数据
// 参考： /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>
