美文网首页
动态组件

动态组件

作者: Julian1009 | 来源:发表于2017-10-20 03:33 被阅读0次

    文档传送门:动态组件

    简单来说就是在某一个挂载点下,可以绑定多个组件,实现动态切换。

    文档中也提到“挂载点”这个词,这个“挂载点”就是<component><component>

    <component v-bind:is="currentView">
     <!-- 组件在 vm.currentview 变化时改变! --> 
    </component>
    
    var vm = new Vue({
      el: '#example',
      data: {
        currentView: 'home'
      },
      components: {
        home: { /* ... */ },
        posts: { /* ... */ },
        archive: { /* ... */ }
      }
    })
    

    例子:https://jsfiddle.net/julianjia/hhuvsm4L/
    文档中还有keep-alive的用法,是将挂载点上的组件存放在缓存中

    <keep-alive>
      <component :is="currentView">
        <!-- 非活动组件将被缓存! -->
      </component>
    </keep-alive>
    

    还有更多用法请进文档传送门

    Q1:加keep-alive和不加的区别?

    Q2:之前看到过使用keep-alive的挂载点绑定太多组件,保存在缓存中导致浏览器容易卡死,怎么解决?

    相关文章

      网友评论

          本文标题:动态组件

          本文链接:https://www.haomeiwen.com/subject/ymhmuxtx.html