参考:vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
动态组件
在不同组件之间进行动态切换
比如:选项卡,点击不同的tab显示相应的组件。
注意:页面上只有当前选择的组件,而不是把所有的组件都列在页面上。
通过给组件添加
is
特性来实现。
如图
代码
html:
<!-- button按钮 -->
<div class="tabs">
<button @click="toggleTab('tab1')">标签一</button>
<button @click="toggleTab('tab2')">标签二</button>
<button @click="toggleTab('tab3')">标签三</button>
</div>
<!-- 动态显示的组件:is绑定当前显示的组件,curTab改变时tab1会变成其他组件,tab2或tab3 -->