本文探讨了Vue中动态组件的使用，通过<component>元素结合is属性实现组件切换。同时，介绍了如何配合<keep-alive>保持组件状态，避免重复渲染。对比v-show，<keep-alive>更适合于页面中大型组件频繁切换的场景。示例展示了动态切换组件及在<keep-alive>中的应用，指出<component>不支持直接添加class。
动态组件的使用
虽然vue 已经提供了 v-if v-show来动态显示隐藏组件
同时也提供<component>元素在一个挂载点上动态的切换组件，通过is来决定那个组件被渲染显示
配合 <keep-alive>使用时，可以保留组件状态避免重新渲染（和v-show 比较的差别是v-show 是一开始就渲染的所有组件，而keep-alive 并不是一开始就渲染好所有组件，而已保留渲染过的组件）
示例如下：
<body>
<div id="app">
<component v-bind:is="show"></component>
<button v-on:click="changeShow">change show</button>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
最低0.47元/天 解锁文章
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
