时间戳

首页 > 解决方案 > 如何为列表中的项目设置自定义模板，而不是在“v-for”循环中使用它？

vue.js - 如何为列表中的项目设置自定义模板，而不是在“v-for”循环中使用它？

问题描述

我想要实现的是：

<li v-for="(item, index) in items" :key="index>
  <div v-if="item.Component">
    <item.Component :value="item.value" />
  </div>
  <div v-else>{{ item.value }}</div>
</li>

但无论如何，我根本不喜欢这个解决方案。为项目列表中的项目定义Component键的想法很难维护，因为至少很难以模板样式的方式编写它（通常我们在里面谈论太长的 HTML）。我也不喜欢包裹item.Component在里面div。

data() {
  return {
    list: [{
      value: 'abc',
      Component: {
        props: ['value'],
        template: `123 {{ value }} 312`
      }
    }]
  };
}

有谁知道这方面的最佳实践解决方案以及 Vue 在他们的文档中描述这种情况的地方？

标签： vue.jsvuejs2vue-component

解决方案

您可以使用 Vue 的<component/>标签在列表中动态设置组件。

<li v-for="(item, index) in items" :key="index>
  <component v-if="item.Component" :is="item.Component" :value="item.value"></component>
  <div v-else>{{ item.value }}</div>
</li>

<script>
  ...,
  data: () => ({
    list: [{
      value: 'abc',
      Component: {
        props: ['value'],
        template: `<div>123 {{ value }} 312</div>` // must be enclosed in a element.
      }
    }]
  })
</script>

你也可以导入一个组件，这样你就可以创建一个新文件并将你的模板和脚本放在那里。

父.vue

<script>
import SomeComponent from "@/components/SomeComponent.vue";  //import your component here.

export default {
  data() {
    return {
      list: [
        {
          value: "abc",
          Component: SomeComponent  // define your imported component here.
        },
      ]
    };
  }
};
</script>

SomeComponent.vue

<template>
  <div>123 {{ value }} 312</div>
</template>
<script>
export default {
  name: "SomeComponent",
  props: ["value"]
};
</script>

这是一个演示。

推荐阅读