vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新渲染
通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染<!--动态组件-component使用--><div class="app"><ul><li @click="currView='home'&quo
·
通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留 ,主要用于保留组件状态或避免重新渲染
<!--动态组件-component使用-->
<div class="app">
<ul>
<li @click="currView='home'">首页</li>
<li @click="currView='abount'">关于我们</li>
</ul>
<!--通过keep-alive 保留数据值 填写数据时切换到其他页面,后返回当前页数据保留-->
<keep-alive>
<component :is="currView"></component>
</keep-alive>
</div>
<script type="text/x-Template" id="homeTemp">
<h2>首页数据</h2>
</script>
<script type="text/x-Template" id="abountTemp">
<h2>关于我们数据<input type="text"/></h2>
</script>
<script type="text/javascript">
var vm=new Vue({
el:'.app',
data:{
currView:"home"
},
components:{
"home":{
template:"#homeTemp"
},
"abount":{
template:"#abountTemp"
}
}
});
</script>
更多推荐
已为社区贡献10条内容
所有评论(0)