Vue动态组件加载与传参实例

本示例演示如何在Vue中实现动态加载组件，并传递参数。通过条件渲染，根据用户选择加载不同组件，并在加载时传递数据，实现动态页面展示。

<template>
  <div>
    <!-- 根据用户选择动态加载组件 -->
    <component :is="selectedComponent" :data="componentData"></component>
    <!-- 用户选择不同组件的按钮 -->
    <button @click="loadComponent('ComponentA')">加载组件A</button>
    <button @click="loadComponent('ComponentB')">加载组件B</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      selectedComponent: null,
      componentData: { message: 'Hello from parent!' },
    };
  },
  methods: {
    // 加载组件，并传递数据
    loadComponent(componentName) {
      this.selectedComponent = componentName;
    },
  },
};
</script>

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com