动态组件

// 动态组件： 根据数据的变化 结合 component 这个标签，来随时切换组件的显示

        var app = Vue.createApp({

            data(){

                return {

                    currentItem:'input-item'

                }

            },

            methods:{

                handleClick(){

                    if(this.currentItem === 'input-item'){

                        this.currentItem = 'common-item'

                    }else{

                        this.currentItem = 'input-item'

                    }

                }

            },

            // template:`

            //     <input-item v-show="currentItem === 'input-item'" />

            //     <common-item v-show="currentItem === 'common-item'" />

            //     <button @click="handleClick">切换</button>

            // `,

            template:`  

                <keep-alive>

                    <component :is="currentItem" />

                </keep-alive>

                <button @click="handleClick">切换</button>

            `,

        })

         

        app.component('input-item',{    

            template:` <input />  `

        })

        app.component('common-item',{    

            template:` <div>hello world</div>  `

        })

       const vm =  app.mount('#root')