1. Why using component to dynamically add components failed?
<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>"
}
}}
Why can the first component be added dynamically, but why can’t the introduced modal component work?
2
0
0
Isn’t modal the first component?
The modal cannot be loaded when mounted.
After clicking the button, the first component can be loaded instead?
One more thing.
The correct way to write data is to return an object
data() {
return {}
}
import modal from './company/modal.vue';
export default {
name: 'addItem',
methods: {
switchComponent () {
this.addModal = 'first'
},
computed:{
addmodal:modal
},
components: {
first: {
template: "<p>這里是子組件3</p>"
}
}
}Remove the modal in components and write the value of addModal as modal instead of 'modal';
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
