javascript - Pourquoi Vue ne parvient-il pas à utiliser les composants dynamiques des composants?

Question

1. Pourquoi l'utilisation d'un composant pour ajouter dynamiquement des composants a échoué ?

<modèle>

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

</template>

importer le modal depuis './company/modal.vue'
exporter par défaut {

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

}

Pourquoi le premier composant peut-il être ajouté dynamiquement, mais pourquoi le composant modal introduit ne peut-il pas fonctionner ?

Answer 1

Le modal n'est-il pas le premier composant ?
Le modal ne peut pas être chargé une fois monté
Après avoir cliqué sur le bouton, le premier composant peut être chargé à la place ?

Encore une chose.
La bonne façon d'écrire des données est de renvoyer un objet

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>"  
  }
}
}

Supprimez le modal dans les composants et écrivez la valeur de addModal comme modal au lieu de 'modal' ;