在Vue中动态添加具有事件的不同组件

<template>
  <div>
    <button @click="addComponent">添加组件</button>
    <component v-for="(component, index) in components" :key="index" :is="component.type" @customEvent="handleEvent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: []
    };
  },
  methods: {
    addComponent() {
      // 添加一个新的组件到组件列表
      this.components.push({ type: 'ChildComponent', data: 'some data' });
    },
    handleEvent(data) {
      // 处理子组件触发的事件
      console.log('Event data:', data);
    }
  },
  components: {
    ChildComponent: {
      template: '<div @click="triggerEvent">子组件</div>',
      methods: {
        triggerEvent() {
          // 触发自定义事件，并传递数据
          this.$emit('customEvent', 'event data');
        }
      }
    }
  }
};
</script>