Vue3中如何通过数据绑定动态添加自定义子组件？

你的问题出在模板里直接输出了数组对象，而且没用到Vue官方的动态组件语法来渲染组件实例。按照Vue数据驱动的最佳实践，正确做法是用<component>动态组件配合响应式数组来实现：

调整后的Home.vue代码 #

<script setup>
import { ref, onMounted } from 'vue';
import SearchResultItem from '../components/SearchResultItem.vue';

// 调整数据结构：每个元素存组件和对应的props
const searchResults = ref([]);

onMounted(() => {
  // 添加带props的组件项
  searchResults.value.push({
    component: SearchResultItem,
    props: { value: 'Dynamic result 1' }
  });
  searchResults.value.push({
    component: SearchResultItem,
    props: { value: 'Dynamic result 2' }
  });
});
</script>

<template>
  <div id="searchResults">
    <!-- 使用<component>动态渲染，:is指定组件，v-bind传递props -->
    <component 
      v-for="(item, index) in searchResults" 
      :key="index"
      :is="item.component" 
      v-bind="item.props"
    />
  </div>
</template>

说明 #

• <component>是Vue提供的专门用于动态渲染组件的内置组件，:is属性接收要渲染的组件对象。
• v-bind="item.props"会把props对象里的所有属性绑定到组件上，等价于手动写:value="item.props.value"。
• 数组里的每个元素保存组件实例和对应的属性，后续要新增组件时，直接往searchResults数组push新的对象即可，Vue会自动响应式更新视图。

你的SearchResultItem.vue可以保持原样，不需要修改。

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