zoukankan      html  css  js  c++  java
  • 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 {
       300px;
      height: 150px;
      background: #6163ca;
      margin: 0 auto;
    }
    .ck-cont-t0 {
      height: 40px;
      .ck-cont-t {
         50%;
        color: #ffffff;
        float: left;
      }
    }
    .ck-cont-c0 {
       300px;
      height: 110px;
      background: #20aa59;
    }
    </style>

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

     

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

  • 相关阅读:
    mysql函数
    maven 配置自动本地/线上不同配置自动打包
    maven clean后 编译报错
    htmlunit填坑
    java正则表达式移除网页中注释代码
    spark 计算结果写入mysql 案例及常见问题解决
    pychrome激活
    hadoop集群常见问题解决
    hadoop+spark集群搭建
    C++:构造函数2——拷贝构造函数
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/12029374.html
Copyright © 2011-2022 走看看