vue2 实战：作用域插槽

独占默认插槽

单个prop

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去

子：
<template>
  <div>
    <span>
      <slot :user="user">
        {{ user.lastName }}
      </slot>
    </span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {   
      user: {firstName: "Json ", lastName: "Tom",},
    }
  },
}
</script>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

父：
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
 
或者
 
<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
 
或者 独占默认插槽的缩写语法
 
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
 
或者 传入具体的插槽 prop
 
<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>
 
或者 重命名
 
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

显示结果：Json

多个prop

子
<template>
  <div>
    <span>
      <slot :user="user" :user2="user2">
        {{ user.lastName }}-{{ user2.lastName }}
      </slot>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {   
      user: { firstName: "Json ", lastName: "Tom", },
      user2: { firstName: "Json2 ", lastName: "Tom2", },
    }
  },
}
</script>

调整部分子组件写法，各种显示效果 

子：
<slot :user="user" :user2="user2">
  {{ user.lastName }}-{{ user2.lastName }}
</slot>

父：
<current-user></current-user>

显示效果：Tom-Tom2

------------

子：
<slot :user="user" :user2="user2">
  {{ user.lastName }}-{{ user2.lastName }}
</slot>

父：
<current-user v-slot="{ user: person, user2: person2 }">
  {{ person.firstName }}----{{ person2.firstName }}
</current-user>

显示效果：Json ----Json2

------------

子：
<slot :user="user" :user3="user2">
  {{ user.lastName }}-{{ user3.lastName }}
</slot>

父：
<current-user v-slot="{ user, user3 }">
  {{ user.firstName }}----{{ user3.firstName }}
</current-user>
或
<current-user v-slot="{ user: person, user3: person2 }">
  {{ person.firstName }}----{{ person2.firstName }}
</current-user>


显示效果：Json ----Json2

------------

子：
<slot :user="user" :user3="user2">
  {{ user.lastName }}-{{ user3.lastName }}
</slot>

父：
<current-user></current-user>

显示效果：报错

定义后备内容：prop设置为undefined 

子：
<template>
    <div>
    <span>
      <slot :user="user">
        {{ user.lastName }}
      </slot>
    </span>
  </div>

</template>

<script>
export default {
  data() {
    return {   
      user: undefined ,
    }
  },
}
</script>

父：
<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

显示效果：Guest

多个插槽

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
 
  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>