Vue动态创建组件时如何传递props？有哪些支持单文件组件的实现方案？

方案1：基于现有Vue.extend写法传递Prop #

你当前使用的Vue.extend方案可以直接在实例化构造函数时传入propsData配置项传递Prop，修改后的代码如下：

import Building_Info from './Info_Zone/Building'
var Building_Info_Class = Vue.extend(Building_Info)
// 实例化时通过propsData传入组件所需的所有Prop
var building_info_instance = new Building_Info_Class({
  propsData: {
    // 替换为你的组件实际Prop字段和对应值即可
    buildingId: 1001,
    buildingName: "商务中心A座"
  }
})
console.log(building_info_instance)
// 修正原代码变量名拼写错误：bulding → building
building_info_instance.$mount()
place_to_add_component.$el.appendChild(building_info_instance.$el)

如果后续需要动态更新Prop，直接给实例对应的Prop属性赋值即可，响应式会自动生效，示例：building_info_instance.buildingId = 1002

注意：propsData为Vue2专属API，Vue3已废弃该配置项。

方案2：推荐实现方案（兼容单文件组件） #

Vue2场景：内置动态组件标签 #

不需要手动操作DOM，直接通过Vue内置的<component>标签实现动态渲染，Prop传递和普通组件写法完全一致：

<template>
  <div>
    <button @click="showBuildingInfo = true">点击加载建筑信息组件</button>
    <component
      v-if="showBuildingInfo"
      :is="Building_Info"
      :building-id="curBuildingId"
      :building-name="curBuildingName"
      @close="showBuildingInfo = false"
    />
  </div>
</template>
<script>
import Building_Info from './Info_Zone/Building'
export default {
  components: { Building_Info },
  data() {
    return {
      showBuildingInfo: false,
      curBuildingId: 1001,
      curBuildingName: "商务中心A座"
    }
  }
}
</script>

Vue3场景：createVNode + render API #

比extend更灵活，支持直接绑定事件和Prop：

import { createVNode, render } from 'vue'
import Building_Info from './Info_Zone/Building.vue'

// 按钮点击触发函数
const handleShowBuildingInfo = () => {
  // 创建虚拟节点，第二个参数即为所有Prop和事件配置
  const buildingVNode = createVNode(Building_Info, {
    buildingId: 1001,
    buildingName: "商务中心A座",
    onClose: () => {
      // 销毁组件逻辑：清空容器渲染内容
      render(null, place_to_add_component)
    }
  })
  // 直接渲染到指定DOM容器，无需手动append
  render(buildingVNode, place_to_add_component)
}

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