Vue插槽的使用和插槽的传值操作

最近有小伙伴询问Vue中插槽的使用，或者有些对插槽比较陌生的有比较想用的，这里我就针对Vue的插槽使用方式进行简单的讲解，其实对于插槽最全的还要属官方文档，但是有些小伙伴就是不爱看官方文档，那么就来看下我这边对插槽基础使用的叙述吧，希望对你有用！！！
首先我们先了解插槽的分类，插槽分为默认插槽（这个叫法可能有不一样的，但是都是一个东西，我这比较习惯成为默认插槽）、具名插槽和作用域插槽。下边将对这几个插槽的基础用法进行简单实例，讲解谈不上就是基础的使用用法让你更加便捷的使用。

默认插槽

默认插槽顾名思义就是默认中的，默认的插槽为直接写在子组件标签内部的，在子组件中用slot标签接收，这里的插槽使用方式为vue在2.6.0及之后版本的使用方式，包括后边具名和作用域的都是如此！！！
还是老规矩，话不多说上代码，用代码来讲解感觉是最使用的，从代码中理解也是最有效的，如果看不明白代码敲起来试一试会好很多：
插槽的代码都分为父组件代码和子组件代码，这样演示插槽更为直白。

Father.vue 默认插槽父组件

<template><div class="conteiner"><!-- 默认插槽 - 父组件 --><h2>这是默认插槽的父组件</h2><hr><p>下边是调用子组件，以及子组件的插槽使用</p><p style="color: red;">基础的插槽，没有插槽的名字基本可以随意使用，直接放入组件标签内部，在子组件中用slot组件接收即可，这也是vue的插槽在2.6.0之后的使用方式，比之前的使用方式更加便捷和高效</p><son>这是一段插槽的内容<p>直接由插槽传入</p><hr></son></div>
</template><script>
import Son from './Son.vue';
export default {components: {Son,},
}
</script>
<style lang="scss" scoped>
</style>

Son.vue 默认插槽子组件

<template><div><!-- 基础插槽 - 子组件 --><h3>基础插槽 - 这里是子组件</h3><div style="color: #1a84d6;"><p>子组件中使用插槽，写一个slot标签，就是一个一个引用，理论可以无限使用</p><slot></slot><slot></slot><slot></slot></div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
</style>

代码中的文章请注意查看，一些描述信息都在代码中展示了，方便学习

具名插槽

根据名字可以得知，这是拥有名字的插槽，有了名字就方便使用了，那一部分用到那一部分不会冲突。

Father.vue 具名插槽父组件

<template><div class="conteiner"><h2>这是具名插槽 - 具名插槽父组件</h2><p>具名插槽子组件调用，以及具名插槽的使用</p><hr /><div><son><p style="color: #f00;">下边是具名插槽的内容，这个不带名字的不会被具名插槽使用，现在的具名插槽在2.6.0后必须要在template标签中，且要带有v-slot，否则也会被认为是默认插槽。如：</p><template>默认插槽</template><template v-slot:header>我是具名插槽，header的内容</template><template #content><p style="color: blue;">此外, 具名插槽的写法，也有了类似属性和事件的简便写法，直接用 # 号来代替 v-slot: 这样更加方便了对插槽的应用</p></template></son></div></div>
</template><script>
import Son from './Son.vue';
export default {components: {Son},
}
</script><style lang="scss" scoped>
</style>

Son.vue 具名插槽子组件

<template><div><h3>这是具名插槽 - 子组件</h3><p>子组件中具名插槽的内容</p><div><h4>首先用默认插槽的方式获取一下看看</h4><p>应该可以看到插槽的内容只有非具名插槽部分的内容</p><slot></slot><h4>然后是具名插槽内容的使用</h4><slot name="header"></slot><hr><h4>具名插槽的简便写法在组件内部通样使用</h4><slot name="content"></slot><hr><h4>同样具名插槽也可以重复使用</h4><slot name="content"></slot></div></div>
</template><script>
export default {}
</script><style lang="scss" scoped>
</style>

其实默认插槽也是具名插槽的一种，只是名字为default在使用中省略了而已，在后边作用域的代码中我们会看到对他们的描述。

作用域插槽

作用域插槽的作用域为当前的所处的vue实例环境，正常在父组件中标签内部都是父组件的环境，可以直接使用父组件data等的信息，但是插槽作为到子组件中展示的内容，有时候我没又需要一些子组件中的data数据之类的，利用父子组件传值也可以但是相对麻烦，插槽则提供了一种更好的方式，老版本（即为2.6.0之前的）中使用slot-scope来实现，新版本中的使用为更加的方便。

Father.vue 作用域插槽父组件

<template><div class="conteiner"><h2>这是作用域插槽 - 作用域插槽父组件</h2><p style="color: #f00;">作用域插槽为在插槽中，为父元素的环境，想使用子组件环境中的变量，算是插槽的传值方式</p><p>作用域插槽子组件调用，以及作用域插槽的使用</p><hr /><div><son><template v-slot="sonMsgProp"><h3>首先是默认插槽</h3><div>在父组件中的信息：{{msg}}</div><div>这是子组件中的信息: {{sonMsgProp.sonMsg}}</div></template><template #nameSlot="sonMsgProp"><h3>然后是具名插槽</h3><p>具名插槽的简单使用</p><div>在父组件中的信息：{{msg}}</div><div>这是子组件中的信息: {{sonMsgProp.sonMsg}}</div></template><template #userInfo="{userInfo, jobInfo, familyInfo={members: '未知'}, lookInfo: goddesInfo}"><h3>传入多个参数</h3><p>传入多个参数，可以使用解构的方式传入，当然也可以设置默认值和设置别名，在传入的值不存在时候会用默认的值</p><dl><dt>个人信息</dt><dd>姓名：{{userInfo.name}}</dd><dd>年龄：{{userInfo.age}}</dd><dd>已婚：{{userInfo.isWeading}}</dd></dl><dl><dt>工作信息</dt><dd>工作：{{jobInfo.work}}</dd><dd>工龄：{{jobInfo.workAge}}</dd><dd>格言：{{jobInfo.motto}}</dd></dl><dl><dt>家庭情况</dt><dd>家庭成员：{{familyInfo.members}}</dd></dl><dl><dt>身体情况</dt><dd>升高：{{goddesInfo.height}}</dd><dd>体重：{{goddesInfo.weight}}</dd></dl></template></son></div></div>
</template><script>
import Son from './Son.vue';
export default {components: {Son,},data () {return {msg: '这是父组件中的信息'}},
}
</script><style lang="scss" scoped>
</style>

Father.vue 作用域插槽子组件

<template><div><h3>这是作用域插槽 - 子组件</h3><p>作用域插槽内容展示部分</p><div><h4>默认插槽，其实默认插槽也是name="default"的一个具名插槽的简写</h4><slot :sonMsg="sonMsg"></slot><hr><slot name="nameSlot"></slot><hr><h4>多个参数</h4><slot name="userInfo":userInfo="{name: name, age, isWeading}":jobInfo="{work, workAge, motto}":lookInfo="{height, weight}"></slot></div></div>
</template><script>
export default {data () {return {sonMsg: '这是子组件中的内容信息',name: '赵二丫',age: 28,isWeading: 'No',work: "程序员",workAge: "n多年",motto: "地球不爆炸，我们不放假",height: '165cm',weight: '100kg'}},
}
</script><style lang="scss" scoped>
</style>

插槽的使用多是在封装组件时候的使用，使封装的组件使用起来扩展性更加方便和更加的好用。

以上就是对Vue插槽使用的描述和实例，作者确实有点懒没有将代码每一步分解一下，不过里边的文字描述相信你可以理解的。
如有疑问可以留言，也可以到QQ群一起探讨：
QQ群1: 657011407， QQ群2: 492593055，也可以到微信找我 shenzhipeng1023