vvv动态组件和keep-alive

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="a.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>

const app = Vue.createApp({
    data(){
        return {
            currentItem:'input-item'
        }
},
methods:{
    zmf(){
        this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'
    }
},
template:`
<keep-alive>
<component :is="currentItem"/>
</keep-alive>
<!-- <input-item v-show="currentItem === 'input-item'" /> -->
<!-- <common-item v-show="currentItem === 'common-item'" /> -->
<button @click="zmf">zmf</button>
`
})
app.component('input-item',{

template:`
<div>
    input-item
</div>
`
})
app.component('common-item',{

template:`
<div>
    common-item
</div>
`
})


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

</script>
</html>

原文地址:https://www.cnblogs.com/lfhphp/p/14919338.html