动态组件适用于多个组件频繁切换的处理。

    ·用于将一个‘元组件’渲染为动态组件，以is属性值决定渲染哪个组件。

    动态组件 - 图1

    ·用于实现多个组件的快速切换，例如选项卡效果。

    动态组件 - 图2

    动态组件 - 图3

    动态组件 - 图4

    ·is 属性会在每次切换组件时，Vue都会创建一个新的组件实例。

    动态组件 - 图5

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <button v-for=“title in titles” :key=“title” @click=“currentCom = title” > {{ title }} </button> <component :is=“currentCom”></component> </div> <script src=“lib/vue.js”></script> <script> // 设置要切换的子组件选项对象 var ComA = { template: <p>这是组件A的内容：<input type="text"></p> }; var ComB = { template: <p>这是组件B的内容：<input type="text"></p> }; var ComC = { template: <p>这是组件C的内容：<input type="text"></p> }; new Vue({ el: ‘#app’, data: { // 所有组件名称 titles: [‘ComA’, ‘ComB’, ‘ComC’], // 当前组件名称 currentCom: ‘ComA’ }, components: { ComA, ComB, ComC } }); </script> </body> </html>