Vue3如何创建组件实例并向其传递参数？

你当前的写法只是将组件本身推入数组，无法传递参数。要实现带参组件的动态添加，需要调整数据存储结构，结合Vue的动态组件<component>来实现：

1. 修改数据存储结构 #

把some_list改成存储组件配置对象，每个对象包含要渲染的组件和对应的props参数：

data() {
  return {
    some_list: []
  }
},
methods: {
  doSomething(formData) {
    // formData替换为你实际的表单提交参数
    this.some_list.push({
      component: MyComponent,
      props: {
        // 这里传入MyComponent需要的属性，示例：
        title: formData.title,
        content: formData.content,
        uniqueId: Date.now() // 可选，给每个组件加唯一标识
      }
    });
  }
}

2. 模板中渲染动态组件 #

在模板里用<ul>循环渲染列表项，通过<component>标签动态加载组件并绑定props：

<ul>
  <li v-for="(item, index) in some_list" :key="item.props.uniqueId || index">
    <component :is="item.component" v-bind="item.props"></component>
  </li>
</ul>

关键说明 #

• v-bind="item.props"会批量绑定props对象里的所有属性到组件，等价于手动写:title="item.props.title"这类代码，更简洁。
• 给列表项设置唯一key（比如时间戳或表单内的唯一ID），避免Vue渲染时出现组件复用错误。
• 确保MyComponent已正确定义接收的props：

// MyComponent.js
export default {
  props: ['title', 'content', 'uniqueId'],
  // 组件逻辑...
}

内容的提问来源于stack exchange，提问作者ivo