作用域插槽（插槽 Prop）_综合

是什么

从名字上来说“作用域插槽，插槽 Prop”可以分开来讲。首先为什么叫作用域插槽呢，我们知道 slot 本身是有作用域的，即父作用域和子作用域，它们是各自渲染的，也就是说，父作用域无法拿到子作用域中的数据（slot 的基础知识），但是有时候我们希望在父作用域拿到子作用域的数据怎么办呢，那就用作用域插槽。

而插槽 Prop 这个名字我认为是一个类比，因为我们知道 Prop 是父组件数据传递给子组件数据的通信方式，而插槽 Prop 也是一种通信方式，只不过是在 slot 情况下子组件传递给父组件，并且并不需要在 js 中指定 Prop。

为什么使用和怎么用

假设有这样一个场景（如下代码），我们在 Testslot.vue 组件中，有一个后备内容 { {bookinfo.title}}，当我们在父组件不传入任何值时，则显示 { {bookinfo.title}}，即页面会显示“三体”

// 子组件：Testslot.vue<template><div><!-- 插槽 prop --><slot name="slotName" :info="bookinfo">{
    {
    bookinfo.title}}</slot></div>
</template><script>
export default {
    data() {
    return {
    bookinfo: {
    title: '三体',descriptioin: '科幻著作'}};}
};
</script>

但是，如果我们想通过父组件来控制子组件的显示，即我想显示 { {bookinfo.descriptioin}}，直接使用是不行的，因为父组件并不能直接获取子组件的内容

// 父组件
// 这样写会报错<template v-slot:slotNam>{
    info.descriptioin}}</template>

而要想获取子组件的内容，选择性的展示，就要通过作用域插槽，整个过程分两步走

在子组件的 slot 标签上，绑定你要传给父组件的数据，就像 Prop 的语法一样
在父组件中定义一个参数，通过该参数来获取传入的数据

// 子组件：Testslot.vue
<template><div><!-- 插槽 prop -->// 这里 info 就是要传给父组件的 prop 变量，bookinfo 就是实际的内容<slot name="slotName" :info="bookinfo">{
    {
    bookinfo.title}}</slot></div>
</template><script>
export default {
    data() {
    return {
    bookinfo: {
    title: '三体',descriptioin: '科幻著作'}};</script// 父组件
// 这里我用 receiver 来接收这个 info 的数据，slotName 是这个具名插槽的名<template v-slot:slotName="receiver">{
    {
    receiver.info.descriptioin}}</template>
// 简写
// receiver 只是用于接收 info 的临时值，你可以直接用解构的方式来获取 info<!-- <template v-slot:slotName="{info}">{
    {
    info.descriptioin}}</template> -->

最终页面将会显示“科幻著作”的字样
作用域插槽（插槽 Prop）

参考

如果你还不清楚，则阅读下面的文章，写得非常通俗易懂
when/why to use vue scoped slots