动态组件的常用

一般来说动态组件在tab栏切换中，他每个页面如果不同，可以采用动态组件来做

vue

<template>  
  <div id="app">  
    <div class="radio-wrap">  
      <div class="radio-group" v-model="tabView">   
        <span 
           v-for="(tab ,index) in tabs" 
           :class="{cur:iscur==index}" 
           @click="iscur=index,tabChange('select' + (index + 1))">
             {{tab.name}}
        </span>  
      </div>  
      <div style="margin:10px 0;"></div>  
      <keep-alive>   
        <component :is="tabView"></component>  
      </keep-alive>   
    </div>  
  </div>  
</template>  
  
<script>  
  import select1 from './components/select01.vue';  
  import select2 from './components/select02.vue';  
  import select3 from './components/select03.vue';  
  export default {  
    name: 'app',  
      data () {  
        return {  
          tabView: 'select1',
          iscur: 0,   
          tabs: [{name: "选项一"}, {name: "选项二"} ,{name: "选项三"}]
        }  
  },  
  components: {  
    select1,  
    select2,  
    select3  
  },  
  methods: {  
    tabChange:function(tab){  
      this.tabView = tab;  
    }  
  }  
}  
</script>  `

<template>  
  <div id="app">  
    <div class="radio-wrap">  
      <div class="radio-group" v-model="tabView">   
        <span 
           v-for="(tab ,index) in tabs" 
           :class="{cur:iscur==index}" 
           @click="iscur=index,tabChange('select' + (index + 1))">
             {{tab.name}}
        </span>  
      </div>  
      <div style="margin:10px 0;"></div>  
      <keep-alive>   
        <component :is="tabView"></component>  
      </keep-alive>   
    </div>  
  </div>  
</template>  
  
<script>  
  import select1 from './components/select01.vue';  
  import select2 from './components/select02.vue';  
  import select3 from './components/select03.vue';  
  export default {  
    name: 'app',  
      data () {  
        return {  
          tabView: 'select1',
          iscur: 0,   
          tabs: [{name: "选项一"}, {name: "选项二"} ,{name: "选项三"}]
        }  
  },  
  components: {  
    select1,  
    select2,  
    select3  
  },  
  methods: {  
    tabChange:function(tab){  
      this.tabView = tab;  
    }  
  }  
}  
</script>  `

动态组件的常用 ​

动态组件的常用