Vue.js 中的动态组件是什么？如何使用？代码举例讲解

动态组件是 Vue.js 中的一个概念,它允许我们在父组件内使用 标签动态渲染不同的子组件。
使用动态组件的步骤:

1. 在父组件中使用 标签,并通过 :is 属性绑定要渲染的子组件:

html
<component :is="currentTabComponent"></component>

2. 通过数据或计算属性的值,动态切换 要渲染的子组件:

js 
data: {
  currentTab: 'Home',  
},
computed: {
  currentTabComponent() {
    return 'Tab' + this.currentTab  // TabHome
  } 
}

3. 绑定的子组件在模板中定义:

js
Vue.component('TabHome', { /* ... */ })
Vue.component('TabMessages', { /* ... */ })

4. 处只会渲染绑定的子组件,且组件实例也将被保留。
   示例:

html 
<component :is="currentTabComponent"></component> 

<button @click="currentTab = 'Home'">Home</button>  
<button @click="currentTab = 'Messages'">Messages</button>

components: {
  TabHome: { /* ... */ }, 
  TabMessages: { /* ... */ }   
} 

js
data: { 
  currentTab: 'Home'
},
computed: {
  currentTabComponent() {
    return 'Tab' + this.currentTab
  }  
} 

动态组件让我们可以在运行时动态渲染和切换不同子组件,实现类似选项卡的效果。理解动态组件的机制,可以让我们开发出更加灵活的组件结构。