美文网首页vue
vue is 用法:

vue is 用法:

作者: 凌晨丶杨先森灬 | 来源:发表于2019-10-11 15:36 被阅读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>
    

    完美~

    相关文章

      网友评论

        本文标题:vue is 用法:

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