VueJS中如何动态渲染CanvasComp组件并传递数据？

你可以通过Vue内置的<component>组件实现需求，不用在模板里硬写组件标签，直接动态指定组件并传递参数，这是官方推荐的动态组件方案。

核心实现步骤 #

• 模板中使用<component>替代硬编码的组件标签，通过:is属性指定要渲染的组件对象
• 在<component>上直接绑定需要传递的props，和手动写组件标签的传参逻辑一致
• 脚本中返回组件对象和响应式数据即可

修正后的完整代码 #

<template>
  <ion-page id="main-content">
    <!-- Vue内置动态组件，:is指定组件，绑定props -->
    <component :is="canvasComponent" :jsoData="data" />
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { IonPage } from "@ionic/vue";
import CanvasComp from "@/components/CanvasComp.vue";

export default defineComponent({
  name: "GraphView",
  components: {
    IonPage
    // CanvasComp无需在这里注册，直接在setup中返回给<component>使用
  },

  setup() {
    // 用ref包装数据确保响应式
    const data = ref([
      { id: 1, name: 'Default' },
      { id: 2, name: 'Demographics'},
      { id: 3, name: 'Other'},
    ]);

    // 存储组件对象，用于动态渲染
    const canvasComponent = ref(CanvasComp);

    return { data, canvasComponent };
  }
});
</script>

进阶：完全在脚本中控制渲染（可选） #

如果需要更灵活的渲染控制（比如指定渲染容器、手动控制渲染时机），可以使用createVNode和renderAPI：

<template>
  <ion-page id="main-content">
    <!-- 渲染容器 -->
    <div ref="renderContainer"></div>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, ref, createVNode, render, onMounted } from "vue";
import { IonPage } from "@ionic/vue";
import CanvasComp from "@/components/CanvasComp.vue";

export default defineComponent({
  name: "GraphView",
  components: { IonPage },

  setup() {
    const data = ref([
      { id: 1, name: 'Default' },
      { id: 2, name: 'Demographics'},
      { id: 3, name: 'Other'},
    ]);
    // 用于指定渲染容器的ref
    const renderContainer = ref<HTMLElement | null>(null);

    onMounted(() => {
      if (!renderContainer.value) return;
      // 创建组件虚拟节点并传递props
      const canvasVNode = createVNode(CanvasComp, { jsoData: data.value });
      // 将组件渲染到指定容器中
      render(canvasVNode, renderContainer.value);
    });

    return { renderContainer };
  }
});
</script>

注意事项 #

• 确保数据是响应式的（用ref或reactive包装），这样组件能感知数据变化并更新
• 如果后续需要切换不同组件，只需修改canvasComponent的值即可，<component>会自动渲染新组件

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