Vue.js作用域插槽疑问：子组件无user对象时如何使用？

嘿，这个问题其实很好解决！作用域插槽的核心是子组件通过v-bind把需要传递的数据绑定到<slot>上，父组件通过v-slot接收这些 props——不一定非要绑定一个完整的对象，单个属性或者临时组合的对象都完全可行，给你两种思路：

思路1：直接绑定单个属性 #

如果子组件的data是分散的firstName和lastName，可以直接把这两个属性分别绑定到插槽上：

子组件代码 #

<span>
  <!-- 把单个属性分别绑定到插槽 -->
  <slot 
    v-bind:firstName="firstName" 
    v-bind:lastName="lastName"
  >
    {{ lastName }} <!-- 默认显示 lastName -->
  </slot>
</span>

<script>
export default {
  data() {
    return {
      firstName: 'fname',
      lastName: 'lname'
    }
  }
}
</script>

父组件代码 #

父组件接收时，可以直接从插槽props里提取这两个属性，还能用ES6解构简化写法：

<current-user>
  <!-- 解构插槽props，直接使用属性 -->
  <template v-slot:default="{ firstName, lastName }">
    {{ firstName }} <!-- 显示 firstName -->
    <!-- 也可以组合显示：{{ firstName }} {{ lastName }} -->
  </template>
</current-user>

思路2：临时组合成对象绑定 #

如果你想保持父组件的写法和原来一致（还是通过user对象获取属性），可以在子组件的插槽绑定里，把分散的属性临时组合成一个user对象：

子组件代码 #

<span>
  <!-- 把分散的属性打包成user对象传递 -->
  <slot v-bind:user="{ firstName, lastName }">
    {{ lastName }} <!-- 默认显示 lastName -->
  </slot>
</span>

<script>
export default {
  data() {
    return {
      firstName: 'fname',
      lastName: 'lname'
    }
  }
}
</script>

父组件代码 #

这样父组件的写法就和你原来的示例完全一样，不需要任何修改：

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

简单来说，作用域插槽的绑定非常灵活，只要是子组件能访问到的数据，不管是单个值、对象还是数组，都可以通过v-bind传递给父组件使用~

内容的提问来源于stack exchange，提问作者Quốc Cường