vue如何编写一个复合组件？

复合组件模式允许你创建一组相互关联的组件，这些组件一起工作来实现特定的功能。

这里以一个简单的 Tabs 组件为例：

<template>
  <div class="tabs">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  provide() {
    return {
      tabs: this
    }
  },
  data() {
    return {
      activeTab: 0,
      panels: []
    }
  },
  methods: {
    addPanel(panel) {
      this.panels.push(panel)
    },
    removePanel(panel) {
      const index = this.panels.indexOf(panel)
      if (index !== -1) {
        this.panels.splice(index, 1)
      }
    },
    setActiveTab(index) {
      this.activeTab = index
    }
  }
}
</script>

<template>
  <div class="tab-nav">
    <div
      v-for="(panel, index) in tabs.panels"
      :key="index"
      class="tab-nav-item"
      :class="{ active: tabs.activeTab === index }"
      @click="tabs.setActiveTab(index)"
    >
      {{ panel.title }}
    ...

点击查看剩余70%