Question

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

比方说，我想重构以下代码：

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：

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

我想要实现的目标：我正在尝试重构代码，即创建小的组件。第一个清单中的代码应放在名为<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>的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>

这应该可以解决问题。

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

1 个答案: