So importieren, registrieren und verwenden Sie Komponenten in Stapeln in Vue

	importiere A von 'Komponenten/A'
	importiere B von 'Komponenten/B'
	C aus „Komponenten/C“ importieren
	importiere D aus 'Komponenten/D'

<Vorlage>
  <div Klasse="Wasseranalyse">
    <div Klasse="Inhaltsbox" ref="Inhaltsbox">
      <a-tabs :default-active-key="aktiveKomponente" @change="tabChangeHandle">
        <a-Registerkartenbereich
          v-for="Element in TabList"
          :Schlüssel="Artikel.Schlüssel"
          :tab="Element.tab"
        ></a-tab-pane>
      </a-tabs>
      <div Klasse="Tab-Bereich-Box">
      	<!-- Binden Sie über das is-Attribut den entsprechenden Komponentennamen und zeigen Sie die entsprechende Komponente an-->
        <Komponente: ist = "aktiveKomponente"></Komponente>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
//Konvertiere die mittlere horizontale Linie in camelCase var camelCase = function (s) {
  return s.replace(/-\w/g, Funktion (x) {
    return x.slice(1).toUpperCase();
  });
};
// Unterkomponenten stapelweise importieren, siehe Syntax oben const allComponents = require.context("./comp", false, /\.vue$/);

Konsole.log(alleKomponenten.keys())
// ["./tem-a.vue", "./tem-b.vue", "./tem-c.vue", "./tem-d.vue"]

console.log(alleKomponenten.id)
//./src/views/tempManage/comp synchronisieren \.vue$

// Erstellen Sie ein Komponenten-Array und registrieren Sie es in den folgenden Komponenten let resComponents = {};
allComponents.keys().fürEach(comName => {
  let name = camelCase(comName);
  const comp = alle Komponenten (comName);
  resComponents[name.replace(/^\.\/(.*)\.\w+$/, "$1")] = comp.default;
});

Standard exportieren {
  Name: "WaterQuery",
  Komponenten: resComponents,
  Daten() {
    zurückkehren {
      aktiveKomponente: "temA",
      RegisterkarteListe: [
        {
          Schlüssel: "temA",
          Registerkarte: „Komponente A“,
        },
        {
          Schlüssel: "temB",
          Registerkarte: "B-Komponente",
        },
        {
          Schlüssel: "temC",
          Registerkarte: „C-Komponenten“,
        },
        {
          Schlüssel: "temD",
          Registerkarte: „D-Komponenten“,
        },
      ],
    };
  },
  erstellt() {
    wenn (diese.$route.query["val"]) {
      diese.activeComponent = diese.$route.query["val"];
    }
  },
  Methoden: {
    // Tab-Leiste wechseln tabChangeHandle(val) {
      const {Pfad} = dies.$router;

      dies.$router.push({
        Weg,
        Abfrage: {val},
      });
      this.activeComponent = Wert;
    },
  },
};
</Skript>

<Stilbereich>
.Wasseranalyse {
  Höhe: 100%;
  Überlauf: automatisch;
}
.Inhaltsbox {
  Höhe: 100%;
}
.tab-pane-box {
  Höhe: berechnet (100 % – 62 Pixel);
}
</Stil>