tab切换组件页面使用 :is属性
父组件
<template>
<div class="">
<t-tabs
v-model="value"
@change="tabChangeClick"
>
<t-tab-panel
v-for="(panel, index) in panels"
v-bind="panel"
:key="index"
>
<!-- 此处切换tab, datas是父子组件通信 -->
<component
:is="currentView"
:datas="data"
></component>
</t-tab-panel>
</t-tabs>
</div>
</template>
<script>
import tab1 from "./Tab1";
import tab2 from "./Tab2";
export default {
name: "",
data() {
return {
data: [],
panels: [
{ name: "tab1", label: "tab-1" },
{ name: "tab2", label: "tab-2" },
],
value: "tab1",
tab1: "tab1",
tab2: "tab2",
currentView: "tab1",
};
},
components: {
tab1,
tab2
},
methods: {
tabChangeClick($event) {
this.currentView = $event;
},
},
};
</script>
<style lang=''>
</style>
子组件
Tab1和Tab2 路径结构 Tab1/index.vue,Tab2/index.vue
父组件数据传递给子组件 使用 props