Question

我刚刚在Vue中制作了一个Link组件，这对我来说是新的。现在，我需要制作一个链接列表组件，它基本上是此链接组件的LI元素的UL。我在寻找解决方案，但是大多数示例都可以在本地数组/对象中使用，但我似乎无法弄清楚。

所以我的问题是：利用现有的Link组件，Link list组件会是什么样？

这是链接组件：

<template>
    <nuxt-link
        :to="localePath(url)"
        :class="$style.link"
    >
        <Icon
            v-if="icon"
            class="icon icon--size:2.5x"
            :name="icon"
        />

        <span
            class="text"
        >
            {{ text }}
        </span>
    </nuxt-link>
</template>

<script src="./index.js"></script>
<style type="text/css" src="./index.module.scss" module lang="scss"></style>

import { Icon } from "@/components";

export default {
    props: {
        text: {
            type: String,
            required: true,
            default: "",
        },
        url: {
            type: String,
            required: true,
            default: "",
        },
        icon: {
            type: String,
            required: true,
            default: "",
        },
        expert: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
    components: {
        Icon,
    },
};

链接列表组件是否也应接收这样的数组？

export default {
    props: {
        list: {
            type: Array,
            required: true,
            default: "",
        },
    },
        Link,
    },
};

Answer 1

假设您有一个link对象的数组，它们提供道具text，url，icon以及可选的expert（因为我看不到如果您的目标是将该数组作为道具传递给链接列表组件，那么它将看起来像这样

<template>
  <ul>
    <!-- note the ":key" binding. This should uniquely identify each entry in the list -->
    <li v-for="({ text, url, icon }) in list" :key="url">
      <Link
        :text="text" 
        :url="url" 
        :icon="icon"
      />
    </li>
  </ul>
</template>
<script>
import { Link } from '@/components' // or whatever makes sense

export default {
  name: 'LinkList',
  components: { Link },
  props: {
    list: Array
  }
}
</script>

使用它看起来像

<template>
  <LinkList :list="list" />
</template>
<script>
import { LinkList } from '@/components'

export default {
  components: { LinkList },
  data: () => ({
    list: [{
      text: 'Link #1',
      url: 'https://example.com',
      icon: 'whatever'
    }, {
      // and so on
    }]
  })
}
</script>

在Vue中制作链接组件的链接列表组件

1 个答案: