Vue-查缺补漏(4)-组件高级用法

递归组件

组件可以在其自己的模板中调用自身，**需要设置name选项，且通过name选项**。
递归组件可用来开发一些具有未知层级关系的独立组件，如级联选择器、树形控件等。
注意，必须给出一个条件来限定递归数量，否则抛出Maximum call stack size错误

// 递归组件
 Vue.component('recursion-component', {
   name: 'recursion-component',
   props: {
     count: {
       type: Number,
       default: 2
     }
   },
   template: `<div class="nn">
               <recursion-component
                 :count="count + 1"
                 v-if="count < 3">
                 </recursion-component>
             </div>`
 });

动态组件

Vue 提供了一个特殊元素<component>，用来动态地挂载不同的组件，并使用is属性来选择要挂载的组件
另外使用<keep-alive>元素，把动态组件包裹起来，可以把那些被创建的 组件实例缓存下来，而不是在切换时，反复重新渲染
注意：<keep-alive>要求被 切换到的组件都要有自己的名字，通过name选项设置

<keep-alive>
  <component v-bind:is="currentComponent"></component>
</keep-alive>

异步组件

当工程足够大，使用的组件足够多时，需要考虑性能问题，因此一开始把所有的组件都加载是没有必要的开销。
Vue 允许将组件定义为一个工厂函数，动态地解析组件。Vue 只在组件需要渲染时触发工厂函数，并把结果缓存，用于后面的再次渲染。
推荐用法： 异步组件和webpack的code-splitting 功能配合使用

   Vue.component('async-component', function(resolve, reject) {
  setTimeout(function() {
    resolve({
      template: '<div>异步渲染</div>'
    });
  }, 5000);
});