美文网首页
18. 动态组件和异步组件

18. 动态组件和异步组件

作者: 论宅 | 来源:发表于2019-06-03 15:08 被阅读0次

    使用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)
    })
    

    相关文章

      网友评论

          本文标题:18. 动态组件和异步组件

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