为什么作用域插槽在 vue js 3 中不起作用？

Question

为什么作用域插槽在 vue js 3 中不起作用？ 我正在使用 v-for 循环返回一个对象，但专业领域没有可视化。我想我有一个错误。控制台是空的

我期望在 vue js 3 中返回一个带有 v-for 循环的数组

// Child component
<tr v-for="person in crew" :key="person.id">
    <slot name="speciality-body" :crew="person.speciality"></slot>
    <td>{{person.tab}}</td>
    <td>{{person.fullname}}</td>
  </tr>
// Parent component
<CrewComponent :crew="crew.crew">
      <template #speciality-body="{speciality}">
        <td>{{speciality}}</td>
      </template>
    </CrewComponent>

// data. parent component
      crew: {
        crew: [
          {
            id: '1',
            speciality: 'fds'
          },
          {
            id: '2',
            speciality: 'fgh'
          }, ...

Answer 1

您应该将元素直接放置在元素内，而不是作为插槽的直接子元素。 这是子组件代码的更正版本：

<template>
    <tr v-for="person in crew" :key="person.id">
    <slot name="speciality-body" :crew="person.speciality">
        <td>{{ person.speciality }}</td>
    </slot>
    <td>{{ person.tab }}</td>
    <td>{{ person.fullname }}</td>
    </tr>
</template>

这是父组件代码的更正版本：

<CrewComponent :crew="crew.crew">
    <template #speciality-body="{ crew: speciality }">
    <td>{{ speciality }}</td>
    </template>
</CrewComponent>