美文网首页
tabs ==> component :is实现多个组件实现同一

tabs ==> component :is实现多个组件实现同一

作者: 风中凌乱的男子 | 来源:发表于2020-10-30 16:19 被阅读0次
 <!-- tabs -->
     <van-tabs v-model="active" color='#00beca' :line-width='20' title-active-color='#fff'>
      <van-tab v-for="(item,index) in tabs" :key="index" :title="item.type" />
    </van-tabs> 
    <!-- tabs ==> component :is实现多个组件实现同一个挂载点 -->
     <component :is="activeTab" ref="child"></component> 
 data() {
    return {
      active: 0,
      activeTab: 'Chat',
      tabs: [
        // {
        //   type: '文档',
        //   view: 'Chat',
        // },
        {
          type: '互动',
          view: 'Chat',
        },
      ],
    }
  },
watch: {
    active(newValue, oldValue) {
      console.log(newValue);
    }
  },
 components: {
    Chat: resolve => {
      require(['@/components/v2/live/chat.vue'], resolve)
    },
  },
::v-deep .van-tabs__line {
  bottom: 20px;
}
::v-deep .van-tabs__wrap {
  border-bottom: 1px solid #eee;
}
::v-deep .van-tabs__nav {
  background: rgb(43, 48, 69);
}

相关文章

网友评论

      本文标题:tabs ==> component :is实现多个组件实现同一

      本文链接:https://www.haomeiwen.com/subject/bhpdvktx.html