javascript - vue 使用component 動態元件為什麼不成功

Question

1.為什麼使用component 動態的新增元件沒有成功，

<template>

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

</template>
import modal from './company/modal.vue'
export default {

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

}

為什麼元件first是可以動態的添加上的，為什麼引入的modal 元件不行呢？

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';