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组件的引用这种