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