<template> <div> <slot></slot> </div> </template>
<slot></slot>
-Tag innerhalb der Komponente übergeben und nacheinander auf „Rendern“ klicken . <slot></slot>
标签中,并按顺序渲染出来。<my-component> <p>Hello, world!</p> </my-component>
<my-component>
标签内部添加了一个 <p>
标签,这个 <p>
标签将被传递到组件内部的 <slot></slot>
标签中,并渲染出来。<template> <div> <slot name="header"></slot> <div> <slot></slot> </div> <slot name="footer"></slot> </div> </template>
name="header"
和 name="footer"
为命名插槽,而无 name
属性的 <slot></slot>
标签为默认插槽。当我们在使用这个组件时,可以使用 v-slot
指令来指定某个插槽的内容,并向这个插槽传递 HTML 结构。<my-component> <template v-slot:header> <h1>This is the header</h1> </template> <p>Hello, world!</p> <template v-slot:footer> <footer>Footer</footer> </template> </my-component>
v-slot
指令指定了三个插槽的内容,可以看到,使用命名插槽可以大大提升组件的可读性和可维护性。<template> <div> <slot name="header"></slot> <div> <slot></slot> </div> <slot name="footer"></slot> </div> </template> <my-component>This is the header
<p>Hello, world!
#
来代替 v-slot:
,将 v-slot:name
简写成 #name
rrreeeDer obige Code fügt ein <p>
-Tag innerhalb des <my-component>
-Tags hinzu Das Tag wird an das Tag <slot></slot>
innerhalb der Komponente übergeben und gerendert. Benannte Slots<p>Wenn wir mehrere Slots in einer Komponente verwenden und wir alle die Standard-Slots verwenden, werden diese Slots der Reihe nach gerendert, was unseren Code verwirrend machen kann. Um dies zu vermeiden, können wir benannte Slots verwenden. 🎜🎜Der Unterschied zwischen benannten Slots und Standard-Slots besteht darin, dass wir bei der Verwendung benannter Slots dem Slot einen Namen geben und diesen Namen bei der Übergabe der HTML-Struktur angeben müssen. Hier ist ein Beispiel einer Komponente, die benannte Slots verwendet: 🎜rrreee🎜Der obige Code definiert drei Slots, wobei name="header"
und name="footer"
ein benannter Slot ist Slot und ein <slot></slot>
-Tag ohne ein name
-Attribut ist der Standard-Slot. Wenn wir diese Komponente verwenden, können wir die Direktive v-slot
verwenden, um den Inhalt eines Slots anzugeben und die HTML-Struktur an diesen Slot zu übergeben. 🎜rrreee🎜Der obige Code verwendet die Anweisung v-slot
, um den Inhalt von drei Slots anzugeben. Wie Sie sehen, kann die Verwendung benannter Slots die Lesbarkeit und Wartbarkeit von Komponenten erheblich verbessern. 🎜🎜Abgekürzte Syntax🎜🎜Um den Code weiter zu vereinfachen, hat Vue 2.6.0 eine Kurzsyntax eingeführt: 🎜rrreee🎜Wie Sie sehen können, können wir #
anstelle von v-slot verwenden :, kürzen Sie <code>v-slot:name
zu #name
ab, was das Schreiben von Code erleichtert. 🎜🎜Zusammenfassung🎜🎜Durch die Verwendung von Standard-Slots können HTML-Strukturen in Komponenten übergeben werden, die Verwendung benannter Slots kann den Code lesbarer und wartbarer machen und die Verwendung einer abgekürzten Syntax kann das Schreiben von Code erleichtern. Durch die Beherrschung der Verwendung von V-Slot können wir Code flexibler organisieren und die Effizienz der Projektentwicklung sowie die Codequalität verbessern. 🎜Das obige ist der detaillierte Inhalt vonSo verwenden Sie den V-Slot-Standardslot in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!