Nursing-home-management-system/client/src/layout/components/wen-test/DynamicAdditionComponent.vue

<template>
  <div>
    <!-- 定义一个 Element Plus 的按钮，点击该按钮会触发 addNew 方法 -->
    <el-button @click="addNew">添加组件</el-button>
    <!-- 使用 v-for 指令遍历 componentList 数组，将数组中的每个元素渲染为一个组件 -->
    <div v-for="(item, index) in componentList" :key="index">
      <!-- 使用 el-component 动态添加组件 -->
      <!-- :is="item.type" 指定要渲染的组件类型，该类型从 componentList 数组元素的 type 属性获取 -->
      <!-- :props="item.props" 传递组件所需的 props 数据，这些数据从 componentList 数组元素的 props 属性获取 -->
      <el-component :is="item.type" :props="item.props"></el-component>
    </div>
  </div>
</template>

<script>
// 从指定路径导入 HelloWorld 组件
import HelloWorld from './components/HelloWorld.vue'

export default {
  // data 函数返回组件的响应式数据
  data() {
    return {
      // 定义一个空数组 componentList，用于存储要动态添加的组件对象
      componentList: []
    }
  },
  // methods 对象包含组件的方法
  methods: {
    // addNew 方法用于向 componentList 数组中添加一个新的组件对象
    addNew() {
      // 向 componentList 数组中添加一个对象
      // type 属性指定要添加的组件类型为 HelloWorld 组件
      // props 属性指定要传递给 HelloWorld 组件的数据，这里传递了一个 msg 属性，值为 'Hello World!'
      this.componentList.push({
        type: HelloWorld,
        props: {
          msg: 'Hello World!'
        }
      })
    }
  },
  // components 对象用于注册组件，将 HelloWorld 组件注册到当前组件中
  components: {
    HelloWorld
  }
}
</script>