Vue学习小札——2.8 动态组件与v-once指令

<div id="app">
     <component :is="type"></component>
     <!-- <child-one v-if="type=== 'child-one'"></child-one>
     <child-two v-if="type=== 'child-two'"></child-two> -->
     <button @click="handleClick">change</button>
  </div>

Vue.component('child-one',{
     template: '<div v-once>child-one</div>',
  });
  Vue.component('child-two',{
     template: '<div v-once>child-two</div>',
  });
   var vm = new Vue({
     el: "#app", 
     data: {
        type: 'child-one'
     },
     methods: {
       handleClick: function() {
         this.type = (this.type==='child-one') ?
          'child-two' : 'child-one';
       }
     }
   });复制代码

动态组件 <component :is="type"></component>根据 is 里数据的变化自动地加载不同的组件。

v-once指令： 通过v-once指令可以有效的提高一些静态内容的展示效率。