Question

我要根据组件的类型将一小组图标作为自定义图像道具来调用。代码如下：

Vue.component('otherArticles', {
      template: `

       <!-- Component -->
       <li>
           <img :src="icon.text && icon.video" alt="icon">
           <a :href="url">{{ Title }}</a>
       </li>
       `,
      props: {
          title: String,
          url: String,
          icon: [
               {
                    text: "/resources/img/icons/text-icon.svg",
                    video: "/resources/img/icons/video-icon.svg"
               }
          ]

      }
 });

理想情况下，我想在HTML中这样称呼他们：

<!--Component with text icon-->
<other-articles
       icon='text' <!-- how i'd like to call the text icon as img src -->
       url="."
       title="Text article title">
</other-articles>

<!--Component with video icon-->
<other-articles
       icon='video' <!-- how i'd like to call the video icon as img src -->
       url="."
       title="Video article title">
</other-articles>

我知道img src绑定不正确，我将其用作我认为应完成的示例，但我正在寻找有关如何正确执行此操作的所有建议，以便如示例所示，将其称为html。

我只有这两个图标，并且每个图标的src位置可能会更改，但是即使我将来必须更新任一图标的src位置，我也想以相同的方式调用它，保持html调用相同或类似。任何帮助，将不胜感激。谢谢

Answer 1

首先在数据功能中声明图标列表如下：

data() {
    return {
        iconList: {
            text: '/resources/text.png',
            video: '/resource/video.png',
       }
    };
}

请确保删除列表并重命名对象，因为您不能在属性中使用道具和条目来命名。然后将icon的定义添加到props部分，如下所示：

props: {
    icon: {
        type: String,
        required: true,
    },
},

这告诉Vue将prop作为字符串进行类型检查，并在不存在或不是字符串时发出警告。

现在，您需要更新模板功能，以使用此新道具作为查找相关图标的键：

template: `
<img :src="iconList[icon]"/>
`,

现在，您可以将组件用作<comp icon="video"/>

VueJS-调用多个图像src作为自定义道具

1 个答案: