vue Ref 动态组件 keeplive

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

# 普通dom元素上

<p ref="p">hello</p>

# 子组件上

<child-comp ref="child"></child-comp>

 

# 调用

this.$refs.引用名

 

 

通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换

<component v-bind:is="currentView"></component>

<script>

  var vm = new Vue({

    el: '#root',

    data: {

      currentView: 'home'

    },

    components: {

      home,

      posts

    }

  })

</script>

 

 

² keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。

<keep-alive>

<component :is="currentView"></component>

</keep-alive>

<script>

  var vm = new Vue({

    el: '#root',

    data: {

      currentView: 'posts'

    },

    components: {

      home,

      posts

    }

  })

</script>