vue动态创建子组件

回答: 在Vue中，可以通过使用保留的`<component>`元素来动态地创建子组件。通过将组件名绑定到`is`特性，可以让多个组件使用同一个挂载点。通过修改`is`指令的值，可以改变挂载的组件。例如，如果想要动态创建子组件comp1和comp2，可以在父组件的模板中使用`<component>`元素，并将`is`特性绑定到一个变量，然后根据需要修改这个变量的值来切换不同的子组件。子组件comp1的代码可以是:

<template>
  <div class="comp1">
    动态组件子组件1
  </div>
</template>

<script>
export default {
  name: "comp1",
}
</script>

子组件comp2的代码可以是:

<template>
  <div class="comp2">
    动态组件子组件2
  </div>
</template>

<script>
export default {
  name: "comp2",
}
</script>

然后在父组件中，可以使用`<component>`元素来动态创建子组件。例如，可以在父组件的模板中使用以下代码来动态创建子组件:

<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>

<script>
import comp1 from './comp1.vue'
import comp2 from './comp2.vue'

export default {
  data() {
    return {
      componentName: 'comp1', // 默认显示comp1组件
    }
  },
  components: {
    comp1,
    comp2,
  },
}
</script>

通过修改`componentName`的值，可以切换不同的子组件。例如，可以在父组件的方法中使用以下代码来切换子组件:

methods: {
  changeComponent() {
    this.componentName = 'comp2'; // 切换到comp2组件
  },
}

这样就可以实现动态创建子组件的功能。
#### 引用[.reference_title]
- *1* *2* *3* [vue 创建动态组件](https://blog.csdn.net/MeetLunay/article/details/122054192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]