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>

posted on 2021-06-22 16:58  ZKJABLE  阅读(63)  评论(0)  编辑  收藏  举报

导航