可以将组件放入数组并渲染它们吗？答案

【问题标题】：Possible to put component in array and render them?可以将组件放入数组并渲染它们吗？
【发布时间】：2022-01-09 19:49:00
【问题描述】：

我想创建一个组件并将该组件放在一个数组中以便稍后渲染它。我不想从组件中获取数据，传递它，然后重建它。这可能吗？

我正在尝试做的事情目前不起作用并给出错误：

“数据”选项应该是在组件定义中返回每个实例值的函数

不知道是不是指这部分代码。

创建TodoItem组件并将其添加到数组的代码：

addTodo() {
   if (!this.isTodoItemSet()) {
        this.throwError("You must input a todo!");
        return;
   }

   this.clearError();
      const todoItem = this.createTodoItem();
      this.addItem(todoItem);
   },

   createTodoItem() {
      const todoItem = <TodoItem id="this.newItemId" title="this.todoItem" />;
      this.newItemId += 1;
      return todoItem;
   },

   addItem(todoItem) {
      this.$props.todoItems.push(todoItem);
      console.log(this.$props.todoItems);
   },
...

尝试从数组中渲染组件

<template lang="">
  <div>
    <li v-for="item in this.$props.todoItems" :key="item.id">
      <component v-bind:is="item"></component>
    </li>
  </div>
</template>
<script>
import TodoItem from "./TodoItem.vue";

export default {
  components: {
    TodoItem,
  },

  props: {
    todoItems: [],
  },
};
</script>
<style lang=""></style>

【问题讨论】：

在某些组件中，data 选项应该是data(){return {}}
@BoussadjraBrahim 是否有关于将其设为空对象的必要性的更具体信息？
当你知道你无论如何都要渲染<TodoItem>时，是否有理由使用<component>？仅当您要动态加载不同的命名组件时才使用此特殊标记。此外，根据你的函数 createTodoItem 的代码，VueJS 不允许你做 React 所做的事情，除非你安装了一个特殊的 JSX 插件。最后，你不应该改变组件中的 props。
@EstusFlask 我想说数据选项应该看起来像data(){return {....}}
@Terry 没有原因，我只是在测试它是否会导致任何问题并忘记将其改回

标签： javascript vue.js

【解决方案1】：

我刚刚把createTodo函数改成了这个

createTodoItem() {
      const todoItem = Vue.extend(TodoItem);
      const todoItemInstance = new todoItem();
      todoItemInstance.id = this.newItemId;
      todoItemInstance.title = this.todoItem;
      this.newItemId += 1;
      return todoItemInstance;
    },

【讨论】：