Vue dynamic implementation subassembly

So that multiple components use the same mount point and dynamic switching, which is the dynamic components.

By using the reserved element dynamically bind to it is characteristic, the dynamic component can be realized. <component>

One way: partial registration required components

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

< Script > 
var Home = {Template: ' <div> I Home </ div> ' };
 var POST = {Template: ' <div> I submission page </ div> ' };
 var Archive = {Template: ' <div> I archive page </ div> ' };
 new new Vue ({ 
  EL: ' #example ' , 
  Components: { 
    Home, 
    POST, 
    archive, 
  }, 
  Data: { 
    index: 0 , 
    ARR: [ 'home','post','archive'],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})
</script>

Use <keep-alive> Cache

<keep-alive> Parcel dynamic components, component instances are cached inactive, rather than destroy them. And similar, is an abstract component: it does not itself render a DOM element, it will not appear in the chain of parent components. <transition><keep-alive>

Basic usage:

<div id="example">
  <button @click="change">切换页面</button>
  <keep-alive>
    <component :is="currentView"></component>  
  </keep-alive>
</div>

Conditional

If there are a plurality of conditional sub-elements, <keep-alive> it requires that only one child element is rendered:

<div id="example">
  <button @click="change">切换页面</button>
  <keep-alive>
    <home v-if="index===0"></home>
    <posts v-else-if="index===1"></posts>
    <archive v-else></archive>  
  </keep-alive>
</div>

< Script > 
new new Vue ({ 
  EL: ' #example ' , 
  Components: { 
    Home: {Template: ` < div > I'm Home < / div>`}, 
    Posts: {Template: ` < div > I submit page < / div> `}, 
    archive: {Template:` < div > I archive page < / div> `}, 
  }, 
  Data: { 
    index: 0 , 
  }, 
  Methods: { 
    Change () { 
      the let len = Object.keys (this.$options.components).length;
      this.index = (++this.index)%len;
    }
  }
})
</script>

activated 和 deactivated

activated And in all nested components in the tree triggers: deactivated <keep-alive>

<div id="example">
  <button @click="change">切换页面</button>
  <keep-alive>
    <component :is="currentView" @pass-data="getData"></component> 
  </keep-alive>
  <p>{{msg}}</p>
</div>

< Script > 
new new Vue ({ 
  EL: ' #example ' , 
  Data: { 
    index: 0 , 
    MSG: '' ,     
    ARR: [ 
      { 
        Template: ` < div > I Home < / div>`, 
        activated () {
           the this . $ EMIT ( ' Pass-Data ' , ' home page is added ' ); 
        }, 
        Deactivated () { 
          the this $ EMIT (. ' Pass-Data ' ,'Home has been removed ' ); 
        },         
      }, 
      {Template: ` < div > I submit page < / div>`}, 
      {Template: ` < div > I archive page < / div>`} 
    ], 
  }, 
  computed: { 
    CurrentView () { 
        return  the this .arr [ the this .index]; 
    } 
  }, 
  Methods: { 
    Change () { 
      var len =  the this .arr.length;
       the this .index = ( ++ the this.index)% len;
    },
    getData(value){
      this.msg = value;
      setTimeout(()=>{
        this.msg = '';
      },500)
    }
  }
})
</script>

include和exclude

include And excludeproperty allows conditional assembly buffers. Both strings are separated by commas, or a regular expression to represent the array:

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (use v-bind) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

First check the matching components themselves name option, if the name option is not available, matching its locally registered name (parent component key components option). Anonymous component can not be matched.

<keep-alive include="home,archive">
    <component :is="currentView"></component> 
  </keep-alive>

The code above, indicates that only caches home and archive, not the cache posts

Second way: dynamic registration component implementation

 asyncComponents(templateName){
    this.curNavComponents = require(`./components/${templateName}.vue`).default;
}

Reference Address: