18. 动态组件和异步组件

使用is可以切换组件

我们可以使用is来动态的切换组件：

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

当data中的componentName的值改变的时候就会切换componentName代表的组件，如component1。

动态组件上使用keep-alive

如果我们直接切换component的话，一般情况会删除前一个组件，加载后面的组件，从而导致前一个组件的状态会重置，重新切回来的时候组件1会初始化。
使用keep-alive标签的话就可以保证组件会被缓存起来——

<keep-alive>
          <component v-bind:is="componentName"></component>
          
      </keep-alive>
Vue.component("async-component",function(resolve,reject){
        setTimeout(function() {
          resolve({
            template:"<div>异步加载div</div>"
          })
        }, 2000);
      })
      var conponent1 = {
        template: `<div @click="clickEvent">
      这里是组件1，点击数量为{{count}}
      </div>
      
      `,
        data: function() {
          return {
            count: 0
          };
        },
        methods: {
          clickEvent: function() {
            this.count++;
          }
        }
      };

      var conponent2 = {
        template: `<div @click="clickEvent">
      这里是组件2，点击数量为{{count}}
      </div>
      
      `,
        data: function() {
          return {
            count: 0
          };
        },
        methods: {
          clickEvent: function() {
            this.count++;
          }
        }
      };
      var vm = new Vue({
        el: ".apps",
        data: {
          componentName: "conponent1"
        },
        components: {
          conponent1,conponent2
        },
        methods: {
          clickEvent: function() {
            if(this.componentName=="conponent1"){
              Vue.set(vm,"componentName","conponent2")
            }else{
              Vue.set(vm,"componentName","conponent1")
            }
           
          }
        }
      });

这样就能保存状态切换组件了。

异步组件

组件创建可以使用Promise方式

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})