vue

vue is 用法:

2019-10-11  本文已影响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>

完美~

上一篇下一篇

猜你喜欢

热点阅读