组件可以从数据中命名吗？答案

【问题标题】：Can a Component be named from data?组件可以从数据中命名吗？
【发布时间】：2019-05-25 04:44:03
【问题描述】：

我有三个组件图标<DiscoverIcon>、<FeedIcon>、<ProfileIcon>，在标签循环中，我希望能够为每个标题使用不同的图标。

我尝试了一个类似

的列表元素

{ key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'}

并致电{{ link.icon }} 和

{ key: 1, text: 'Discover', route: '/discover'}

并致电<div class='iconbgd'><{{link.text}}Icon /></div>

<template>
  <v-tabs fixed-tabs>
    <v-tab
      v-for="link in links"
      :key="link.key"
    >
      <div class='iconbgd'><{{link.text}}Icon /></div><h4>{{ link.text }}</h4>
    </v-tab>
  </v-tabs>
</template>
<script>
import DiscoverIcon from '../components/icons/DiscoverIcon'
import FeedIcon from '../components/icons/FeedIcon'
import ProfileIcon from '../components/icons/ProfileIcon' 

export default {
  components: {
      DiscoverIcon,
      FeedIcon,
      ProfileIcon
    },
  name: 'App',
  data () {
    return {
      links: [
          { key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'},
          { key: 2, icon: <div class='iconbgd'><FeedIcon /></div>, text: 'Feed', route: '/feed'},
          { key: 3, icon: <div class='iconbgd'><ProfileIcon /></div>, text: 'Profile', route: '/profile'}
      ]
    }
  }
}
</script>


<style>
.iconbgd svg{
  fill:url(#grad1);
  width: 30px;
  height: auto;
  padding-right: 5px;
}
</style>

这是此用例的 Vuetify 选项卡组件，但使其工作与使用选项卡无关，但我的预期结果是能够循环并在每个选项卡中使用不同的相关组件，而不仅仅是创建三个单独的我目前拥有的按钮。

【问题讨论】：

您能分享一下您的Icon 组件是什么吗？看来 Vuetify 对自定义图标的支持已经可以满足您的需求了。
我在 adobe illustrator 中制作了自己的图标，因此它们不是来自材料图标。也许有一种方法可以让它们像那样在 v-icon 中执行，但是 idk 这工作得很好。这就是我的一个图标组件的样子。等待这是我的第一篇文章，所以我知道如何添加该代码。该组件只是有一个带有 svg 的模板

标签： vue.js vue-component vue-router vuetify.js

【解决方案1】：

非常感谢！对此进行一些调整，它就可以工作了。

<v-tabs fixed-tabs color='transparent' slider-color='#1341B2'>
         <v-tab v-for="link in links" :key="link.key" :to="link.route">
            <div class="iconbgd">
                <component :is="link.label + 'Icon'" :key="link.key"/>
            </div>
            <h4>{{link.label}}</h4>
        </v-tab>
    </v-tabs>

【讨论】：

不客气，您能否将我的解决方案作为正确答案:)？
是的，当然！尽管阅读本文的人应该注意我为使其在此答案中起作用而进行的调整。感谢您的帮助！

【解决方案2】：

首先{{link.icon}} 并不是要显示为HTML。您应该使用不同的方法。

<div class='iconbgd'><{{link.text}}Icon /> 等于 <div class='iconbgd' v-text="link.text"><Icon />。因此 Vue 有一个用于 HTML 的v-html 指令，你可以阅读here more about the varieties of directives。

仍然尽量避免使用v-html，因为不同的{{link.icon}} 非常相似，您可以在没有v-html 的情况下轻松工作。

这看起来您正在尝试绑定组件<{{link.text}}Icon />。 Dynamic components 是你要找的，它们非常强大。

我迅速查看了 v-tabs 的 Vuetify 文档并对其进行了一些更改，但是我之前从未使用过它，而且这是未经测试。这应该是你想要完成的：

<template>
  <v-tabs fixed-tabs>
    <v-tab v-for="link in links" :key="link.key">
      <div class="iconbgd">{{link.label}}</div>
    </v-tab>
    <v-tab-item v-for="link in links" :key="link.key">
      <h4>{{link.label}}</h4>
      <component :is="link.label + 'Icon'" :key="link.key"/>
    </v-tab-item>
  </v-tabs>
</template>

<script>
import DiscoverIcon from '../components/icons/DiscoverIcon';
import FeedIcon from '../components/icons/FeedIcon';
import ProfileIcon from '../components/icons/ProfileIcon';

export default {
  data() {
    return {
      links: [
        {
          key: 1,
          label: 'Discover',
          route: '/discover'
        },
        {
          key: 2,
          label: 'Feed',
          route: '/feed'
        },
        {
          key: 3,
          label: 'Profile',
          route: '/profile'
        }
      ]
    };
  },
  name: 'App',
  components: {
    DiscoverIcon,
    FeedIcon,
    ProfileIcon
  }
};
</script>


<style>
.iconbgd svg {
  fill: url(#grad1);
  width: 30px;
  height: auto;
  padding-right: 5px;
}
</style>

【讨论】：