javascript - Warum kann Vue keine dynamischen Komponentenkomponenten verwenden?

Question

1. Warum ist die Verwendung von Komponenten zum dynamischen Hinzufügen von Komponenten fehlgeschlagen?

<template>

<component @showHide="recieveAddData" :is="addModal"
 ></component>
 <button @click="switchComponent"></button>

</template>

Modal importieren aus „./company/modal.vue“
Standard exportieren {

name: 'addItem',
data () {
  addModal: 'modal'
},
methods: {
  switchComponent () {
   this.addModal = 'first'
},
components: {
  modal,
  first: {
     template: "<p>这里是子组件3</p>"  
  }
}

}

Warum kann die erste Komponente dynamisch hinzugefügt werden, aber warum funktioniert die eingeführte modale Komponente nicht?

Answer 1

modal不是最开始的组件吗..
是mounted时候无法加载modal.
点了button之后反而可以加载first ?

还有一点.
data正确写法是需要返回一个对象

data() {
    return {}
}

Answer 2

import modal from './company/modal.vue';
export default {

name: 'addItem',
methods: {
  switchComponent () {
   this.addModal = 'first'
},
computed:{
    addmodal:modal 
},
components: {
  first: {
     template: "<p>这里是子组件3</p>"  
  }
}
}

你在components中的modal去掉，addModal的值写成modal，而不是'modal';