vuejs如何将v插槽引用移至组件中？

Question

我不太了解如何将v-slot数据移动到组件中。

假设我要重构以下代码：

        <template v-slot:item="data">
          <template v-if="typeof data.item !== 'object'">
            <v-list-item-content v-text="data.item"></v-list-item-content>
          </template>
          <template v-else>
            <v-list-item-avatar>
              <img :src="data.item.avatar">
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title v-html="data.item.name"></v-list-item-title>
              <v-list-item-subtitle v-html="data.item.group"></v-list-item-subtitle>
            </v-list-item-content>
          </template>

如何在新组件中传递数据？ 我用props尝试了一下，但是组件没有显示出来：

          <ListElementAvatar
            :item="data.item"
            :imgSrc="data.item.avatar"
            :title="data.item.name"
            :subtitle="data.item.group"
            :source="data" />

ListElementAvatar：

<template>
  <div>
    <template v-if="typeof item !== 'object'">
      <v-list-item-content :v-text="item"></v-list-item-content>
    </template>
    <template v-else>
      <ListItemAvatar :imgSrc="imgSrc" />
      <v-list-item-content>
        <v-list-item-title :v-html="title"></v-list-item-title>
        <v-list-item-subtitle :v-html="subtitle"></v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </div>
</template>

<script>
export default {
  name: "ListElementAvatar",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    imgSrc: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    subtitle: {
      type: String,
      default: '',
    },
    source: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

我要实现的目标：我正在尝试重构代码，即创建小的组件。 第一个清单中的代码应放在名为ListElementAvatar的vue组件内。 因为我想稍后再使用。 当我想重用它时，我只是调用而不是第一个清单中的长代码。

内容： https ： //codepen.io/thadeuszlay/pen/gOYevRZ？editors = 1010

Answer 1

您需要将组件放置在具有范围槽的模板内：

<template v-slot:item="data">
  <ListElementAvatar
    :item="data.item"
    :imgSrc="data.item.avatar"
    :title="data.item.name"
    :subtitle="data.item.group"
    :source="data"
  />
</template>

这应该可以解决问题。