vue动态组件，运用以及效果选项卡的运用

 

 

<template>
  <div>
    list1Son
    <div class="ck-cont">
      <div class="ck-cont-t0">
        <div v-for="(navItem,index) in nav" :key="index" class="ck-cont-t" @click="navclick(index)">{{navItem.name}}</div>
      </div>
      <div class="ck-cont-c0">
        <component :is="cony"></component>
        <!-- <div v-show="activeState == 0">
          我是111111
        </div>
        <div v-show="activeState == 1">
          我是22222
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import cont1 from './cont1';
import cont2 from './cont2';
export default {
  name: '',
  components: {},
  inheritAttrs: true,
  inject: ['provideData'],
  mixins: [],
  props: {},
  data() {
    return {
      activeState: 0,
      nav: [
        {
          name: '左1'
        },
        {
          name: '左2'
        }
      ],
      cont: [
        {
          name: '内容1'
        },
        {
          name: '内容2'
        }
      ],
      cony: cont1
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    console.log('listen2', this.$attrs);
    console.log('provideData', this.provideData);
    this.$emit('changeGen', '我是孙子改变根');
  },
  destroyed() {},
  methods: {
    list1() {
      console.log('我是list1的子组件list1_son方法');
    },
    navclick(ind) {
      this.activeState = ind;
      switch (ind) {
        case 0:
          this.cony = cont1;
          break;
        case 1:
          this.cony = cont2;
          break;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.ck-cont {
  width: 300px;
  height: 150px;
  background: #6163ca;
  margin: 0 auto;
}
.ck-cont-t0 {
  height: 40px;
  .ck-cont-t {
    width: 50%;
    color: #ffffff;
    float: left;
  }
}
.ck-cont-c0 {
  width: 300px;
  height: 110px;
  background: #20aa59;
}
</style>

https://cn.vuejs.org/v2/guide/components-dynamic-async.html

 

 

 

总结主要看:is 以及import组件的引用这种