vuejs keep-alive 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue</title>

     <!-- 
    <script src="vue.js"></script>
    -->
    
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 
</head>
<body> 
 
 <div id="counter-event-example">
 <keep-alive>   <!-- 把切换出去的组件保存到内存中 -->
  <component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
  </component>  
  </keep-alive>
</div>
 
<script> 

 
// 外部注册组件
Vue.component('outside', {
  
  template: '<p>Welcome from outside!</p>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})


// 内部自带组件
var vm = new Vue({
  el: '#counter-event-example',
  data: {
    currentView: 'home'
  },
  components: {
    home:{
        template:'<div><span>home....</span><span> header </span></div>'                
        ,
                data: function () {
                return {
                someChildProperty: true
                }
                }
    },
    posts:{
        template:'<span>posts....</span>',
                data: function () {
                return {
                someChildProperty: true
                }
                }
    },
    archive:{
        template:'<span>archive....</span>',
                data: function () {
                return {
                someChildProperty: true
                }
                }
    }
  }
})


// 可以在 console 修改   vm.currentView='posts'  刷新视图

</script>



</body>
</html>

 

posted on 2017-03-21 17:10  rojas  阅读(201)  评论(0)    收藏  举报