vue element 动态Tabs标签页增删怎样给每个标签页传vue组件?

在 Vue Element 中，可以使用 `el-tabs` 组件来实现动态的标签页增删，同时可以通过 `el-tab-pane` 组件来为每个标签页传递不同的 Vue 组件。下面是一个简单的示例：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <component :is="item.component"></component>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="addTab">Add Tab</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        {
          label: 'Tab 1',
          name: 'tab1',
          component: 'Component1',
        },
        {
          label: 'Tab 2',
          name: 'tab2',
          component: 'Component2',
        },
      ],
      activeTab: 'tab1',
    }
  },
  methods: {
    addTab() {
      const newTab = {
        label: `Tab ${this.tabs.length + 1}`,
        name: `tab${this.tabs.length + 1}`,
        component: 'Component3',
      }
      this.tabs.push(newTab)
      this.activeTab = newTab.name
    },
  },
  components: {
    Component1: {
      template: '<div>Component 1</div>',
    },
    Component2: {
      template: '<div>Component 2</div>',
    },
    Component3: {
      template: '<div>Component 3</div>',
    },
  },
}
</script>

在这个示例中，我们使用 `v-for` 指令来循环渲染每个标签页。对于每个标签页，我们使用 `el-tab-pane` 组件来渲染，其中 `:label` 属性用来设置标签页的名称，`:name` 属性用来设置唯一的标识符，`:key` 属性用来帮助 Vue 识别这个组件。在标签页的内容中，使用 `component` 组件来动态渲染不同的 Vue 组件。具体来说，我们使用 `:is` 属性来设置要渲染的组件类型，然后在组件内部使用相应的模板来渲染内容。

在 `addTab` 方法中，我们通过向 `tabs` 数组中添加一个新的标签页来实现动态增加。同时，我们将 `activeTab` 设置为新添加标签页的 `name` 属性，以便在添加标签页后自动切换到新添加的标签页。

注意，上面的示例中，`Component1`、`Component2` 和 `Component3` 都是简单的组件，只是渲染了一些文本内容。在实际应用中，你需要根据实际情况来编写相应的组件，并将它们传递给标签页。