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>
完美~
网友评论