vue 动态组件(tabs切换)keep-alive:主要用于保留组件状态或避免重新渲染

通过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>

猜你喜欢

转载自blog.csdn.net/a4561614/article/details/81115837