小编Far*_*vli的帖子

在Vue中我们可以使用props，也可以使用$attrs. 什么时候使用道具比较好，什么时候使用比较好$attrs？我们是否可以始终将 props 用于$attrs那些我们不改变其值的对象，而仅将 props 用于那些我们正在改变其值的对象？

我无法循环遍历 Vue 3 中的 $slots 对象以将所有插槽从父组件传递到子组件，$slots 对象在子组件中似乎为空。

如何循环遍历 $slots 对象以将所有父插槽传递给子组件？

运行代码时出现此错误： TypeError: Cannot read properties of null (reading 'key')

这是关于我的问题的沙箱，您可以取消注释第 5 行以查看完整结果： https://codesandbox.io/s/blazing-bush-g7c9h ?file=/src/pages/Index.vue

GitHub 示例： https: //github.com/firibz/vue3slots

家长：

<system-input filled v-model="text" label="input">
  <template v-slot:before>
    <q-icon name="mail" />
  </template>
</system-input>

孩子：

  <div class="row justify-center">
    <q-input v-model="componentValue" v-bind="$attrs" style="width: 250px">
      <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope"/>
      </template>
    </q-input>
    <q-separator class="full-width" color="secondary" />
    <div class="bg-negative full-width q-pa-lg">slots: {{ $slots }}</div>
    <div class="bg-warning full-width q-pa-lg">slots: {{ $slots.before }}</div>
  </div>