vue is

最新推荐文章于 2024-05-05 16:41:12 发布

MrYangZCH

最新推荐文章于 2024-05-05 16:41:12 发布

阅读量245

点赞数

分类专栏： VUE 文章标签： vue is component is is

本文链接：https://blog.csdn.net/Mr_yangzc/article/details/98748524

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

is 用法

 <ul>
  <li is='my-component'></li>  //自己写的组件
</ul>

<!-- 组件会在 `件名` 改变时改变 -->
<component :is="组件名变量"></component>

使用第二种方法

在这里插入图片描述

未使用 is 代码

<a-tabs
  @change="tabCallback"
  :animated="false"
  :activeKey="inTabIndex"
  class="height-100"
  style="text-align: left;"
>
<a-tab-pane tab="我的题卷库" key="1">
  <my-topic-volume>
    <select-question-type slot="selectQuestionType" :tabIndex="inTabIndex" :selectType="selectType"
                          @queryQuestionByConditions="queryQuestionByConditions"
    ></select-question-type>
    <question-content slot="questionContent" :selectType="selectType"></question-content>
  </my-topic-volume>
</a-tab-pane>
<a-tab-pane tab="校本题卷库" key="2">
  <school-topic-volume>
    <select-question-type slot="selectQuestionType" :tabIndex="inTabIndex" :selectType="selectType"
                          @queryQuestionByConditions="queryQuestionByConditions"
    ></select-question-type>
    <question-content slot="questionContent" :selectType="selectType"></question-content>
  </school-topic-volume>
</a-tab-pane>
</a-tabs>

使用 is 后的代码

data(){
    return{
          aTabPaneList: [{tab: "我的题卷库", key: "1"}, {tab: "校本题卷库", key: "2"}],
          isComponent: MyTopicVolume,
         }
      }

methods : {
      tabCallback(val) {
          this.inTabIndex = val;
          if (val == 1) {
            this.isComponent = MyTopicVolume;
            } else if (val == 2) {
           this.isComponent = SchoolTopicVolume;
           }
      },
}

<a-tabs
  @change="tabCallback"
  :animated="false"
  :activeKey="inTabIndex"
  class="height-100"
  style="text-align: left;"
>
<a-tab-pane :tab="item.tab" :key="item.key" v-for="item of aTabPaneList">
  <component :is="isComponent">
    <select-question-type slot="selectQuestionType" :tabIndex="inTabIndex" :selectType="selectType"
                          @queryQuestionByConditions="queryQuestionByConditions"
    ></select-question-type>
    <question-content slot="questionContent" :selectType="selectType"></question-content>
  </component>
</a-tab-pane>
</a-tabs>