vue tab切换页面组件 :is属性

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