Verständnis und Beispielcode des Vue-Standardslots

<Vorlage>
  <div Klasse="Kategorie">
    <h3>{{ title }}Kategorie</h3>

    <!-- Definieren Sie einen Standardslot, dann wird der Inhalt des Tag-Bodys im entsprechenden Komponenten-Tag in App.vue in diesen Slot eingefügt-->
    <Steckplatz></Steckplatz>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Kategorie",
  Requisiten: ["Titel"],
};
</Skript>

<Stil>
.Kategorie {
  Hintergrundfarbe: himmelblau;
  Breite: 200px;
  Höhe: 300px;
}
h3 {
  Textausrichtung: zentriert;
  Hintergrundfarbe: orange;
}
</Stil>

<Vorlage>
  <div Klasse="Container">
    <Kategorietitel="Essen">
      <Bild
        src="https://zqcdn.itzjj.cn/static/skin/mfw0321/static/picture/dj_scv.jpg"
        alt="1"
      />
    </Kategorie>
    <Category title="Spiele" :listData="Spiele">
      <ul>
        <!-- Da sich die Variablen derzeit direkt in app.vue befinden, können Sie das Spiel direkt durchlaufen
        Verwenden Sie nach dem Durchlaufen die Slot-Funktion, um es an Category.vue zu übergeben -->
        <li v-for="(g, index) in Spielen" :key="index">
          {{ G }}
        </li>
      </ul></Kategorie
    >

    <Category title="Filme" :listData="filme">
      <!-- Steuerelemente ermöglichen die Wiedergabe des Videos -->
      <Video
        Bedienelemente
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
    </Kategorie>
  </div>
</Vorlage>

<Skript>
Kategorie aus "./components/Category" importieren;

Standard exportieren {
  Name: "App",
  Komponenten: { Kategorie },
  Daten() {
    zurückkehren {
      Lebensmittel: ["Feuer", "dein Fleisch", "Fleischbällchen"],
      Spiele: ["Red Alert Online", "Cross Fire", "Audition"],
      Filme: ["Der Pate", "Shock Wave", "Awesome"],
    };
  },
};
</Skript>

<Stil>
.container {
  Anzeige: Flex;
  Inhalt ausrichten: Abstand herum;
}

Video
  Breite: 100 %;
}

img {
  Breite: 100 %;
}
</Stil>