Detaillierte Erläuterung der Schritte zur Verwendung von Slot und Slot-Scope in Vue

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Slot und Slot-Scope in Vue ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Verwendung von Slot und Slot-Scope in Vue? ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

Dieser Artikel stellt das spezifische Tutorial zur Verwendung von Slot und Slot-Scope in Vue vor. Freunde in Not schauen vorbei

Vorne schreiben

Die Dokumentbeschreibung über Slots in Vue ist sehr kurz und die Sprache ist sehr prägnant. Darüber hinaus unterscheidet sie sich von der Häufigkeit und Reihenfolge der Verwendung gängiger Optionen wie Methoden, Daten, Berechnungen usw. , dies ist möglich, was das erste verursacht Entwickler, die mit Slots in Berührung kommen, neigen zu „Vergiss es, lerne es später, grundlegende Komponenten kannst du sowieso schon schreiben“, also schließen sie die Vue-Dokumentation.

Tatsächlich ist das Konzept der Slots sehr einfach und das Folgende ist in drei Teile unterteilt. Auch dieser Teil ist in der Reihenfolge der Vue-Dokumentation geschrieben.

Bevor Sie mit dem dritten Teil beginnen, sollten Sie den Schülern, die noch nicht mit Slots vertraut sind, eine einfache Vorstellung davon vermitteln, was ein Slot ist: Ein Slot, auch Slot genannt, ist eine HTML-Vorlage einer Komponente, ob und wie diese Vorlage angezeigt wird um es anzuzeigen Die Anzeige wird durch die übergeordnete Komponente bestimmt. Tatsächlich werden hier die beiden Kernthemen eines Slots hervorgehoben, nämlich ob und wie er angezeigt wird.

Da es sich bei dem Slot um eine Vorlage handelt, kann jede Komponente aus Sicht des Vorlagentyps tatsächlich in zwei Kategorien unterteilt werden: Nicht-Slot-Vorlagen und Slot-Vorlagen.

Nicht-Slot-Vorlagen beziehen sich auf HTML-Vorlagen, die sich auf „p, span, ul, table“ usw. beziehen. Das Anzeigen und Ausblenden von Nicht-Slot-Vorlagen und deren Anzeige werden durch das Plug-in selbst gesteuert ist ein Slot, also ein leerer Raum. Shell, da das Anzeigen und Ausblenden sowie die Art der letztendlich angezeigten HTML-Vorlage von der übergeordneten Komponente gesteuert werden. Die Position der Slot-Anzeige wird jedoch tatsächlich von der Unterkomponente selbst bestimmt. Wo der Slot in die Komponentenvorlage geschrieben wird, wird er von der übergeordneten Komponente übergeben. Die Vorlage wird in Zukunft angezeigt.

Einzelner Slot |. Standard-Slot |. Anonymer Slot

Der erste ist ein einzelner Slot, der offizielle Name von Vue, aber tatsächlich kann er auch als Standard-Slot bezeichnet werden, oder im Gegensatz zu einem benannten Slot können wir ihn als anonymen Slot bezeichnen. Weil das NamensAttribut nicht festgelegt werden muss.

Ein einzelner Steckplatz kann an einer beliebigen Stelle in einer Komponente platziert werden, aber wie der Name schon sagt, kann es in einer Komponente nur einen Steckplatz dieses Typs geben. Dementsprechend kann es viele benannte Slots geben, solange der Name (Namensattribut) vorhanden ist Geschlecht) ist unterschiedlich.

Dies wird im Folgenden anhand eines Beispiels demonstriert.

Übergeordnete Komponente:

<template>
 <p class="father">
  <h3>这里是父组件</h3>
  <child>
   <p class="tmpl">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
    <span>菜单5</span>
    <span>菜单6</span>
   </p>
  </child>
 </p>
</template>

Unterkomponente:

<template>
 <p class="child">
  <h3>这里是子组件</h3>
  <slot></slot>
 </p>
</template>

Da in diesem Beispiel die übergeordnete Komponente über eine HTML-Vorlage verfügt, die in geschrieben ist, lautet die Vorlage für den anonymen Slot der untergeordneten Komponente wie folgt. Mit anderen Worten: anonymes Einfügen von Unterkomponenten Der Steckplatz wird von der Vorlage unten verwendet.

<p class="tmpl">
 <span>菜单1</span>
 <span>菜单2</span>
 <span>菜单3</span>
 <span>菜单4</span>
 <span>菜单5</span>
 <span>菜单6</span>
</p>

Hinweis: Alle Demos wurden zur einfacheren Anzeige gestaltet. Unter ihnen ist die übergeordnete Komponente mit einem grauen Hintergrund gefüllt, und die untergeordneten Komponenten sind mit einem hellblauen Hintergrund gefüllt.

Benannte Slots

Der anonyme Slot hat kein Namensattribut, es handelt sich also um einen anonymen Slot. Wenn dann das Namensattribut zum Slot hinzugefügt wird, wird er zu einem benannten Slot. Ein benannter Slot kann N-mal in einer Komponente vorkommen. Erscheinen an verschiedenen Orten. unten Ein Beispiel ist eine Komponente mit zwei benannten Slots und einem einzelnen Slot. Diese drei Slots werden von der übergeordneten Komponente mit denselben CSS-Stilen angezeigt, der Inhalt unterscheidet sich jedoch geringfügig.

Übergeordnete Komponente:

<template>
 <p class="father">
 <h3>这里是父组件</h3>
 <child>
  <p class="tmpl" slot="up">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
  </p>
  <p class="tmpl" slot="down">
  <span>菜单-1</span>
  <span>菜单-2</span>
  <span>菜单-3</span>
  <span>菜单-4</span>
  <span>菜单-5</span>
  <span>菜单-6</span>
  </p>
  <p class="tmpl">
  <span>菜单->1</span>
  <span>菜单->2</span>
  <span>菜单->3</span>
  <span>菜单->4</span>
  <span>菜单->5</span>
  <span>菜单->6</span>
  </p>
 </child>
 </p>
</template>

Unterkomponente:

<template>
 <p class="child">
 // 具名插槽
 <slot name="up"></slot>
 <h3>这里是子组件</h3>
 // 具名插槽
 <slot name="down"></slot>
 // 匿名插槽
 <slot></slot>
 </p>
</template>

Wie Sie sehen können, ist die übergeordnete Komponente über das Slot-Attribut in der HTML-Vorlage mit dem benannten Slot verknüpft. HTML-Vorlagen ohne Slot-Attribute werden standardmäßig mit anonymen Slots verknüpft.

Scope-Slot |. Slot mit Daten

Schließlich gibt es noch unseren Scope-Slot. Dieser ist etwas schwieriger zu verstehen. Offiziell wird es als Scope-Slot bezeichnet. Im Vergleich zu den beiden vorherigen Slots können wir es tatsächlich als Slot mit Daten bezeichnen. Was bedeutet es? Die ersten beiden bestehen darin,

in die Vorlage der Komponente zu schreiben. Anonyme Slots

<slot></slot>

Benannte Slots

<slot name="up"></slot>

Für den Scope-Slot sind jedoch Bindungsdaten für den Slot erforderlich. Das heißt, Sie müssen es ungefähr wie folgt schreiben.

<slot name="up" :data="data"></slot>
 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 },
}

我们前面说了，插槽最后显示不显示是看父组件有没有在child下面写模板，像下面那样。

<child>
 html模板
</child>

写了，插槽就总得在浏览器上显示点东西，东西就是html该有的模样，没写，插槽就是空壳子，啥都没有。
OK，我们说有html模板的情况，就是父组件会往子组件插模板的情况，那到底插一套什么样的样式呢，这由父组件的html+css共同决定，但是这套样式里面的内容呢 ？

正因为作用域插槽绑定了一套数据，父组件可以拿来用。于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。

我们再来对比，作用域插槽和单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的，上 面的例子中，你看到的文字，“菜单1”，“菜单2”都是父组件自己提供的内容；而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑定的数据的前 提下）。

下面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个人名数组。

父组件：

<template>
 <p class="father">
 <h3>这里是父组件</h3>
 <!--第一次使用：用flex展示数据-->
 <child>
  <template slot-scope="user">
  <p class="tmpl">
   <span v-for="item in user.data">{{item}}</span>
  </p>
  </template>
 </child>
 <!--第二次使用：用列表展示数据-->
 <child>
  <template slot-scope="user">
  <ul>
   <li v-for="item in user.data">{{item}}</li>
  </ul>
  </template>
 </child>
 <!--第三次使用：直接显示数据-->
 <child>
  <template slot-scope="user">
  {{user.data}}
  </template>
 </child>
 <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
 <child>
  我就是模板
 </child>
 </p>
</template>

子组件：

<template>
 <p class="child">
 <h3>这里是子组件</h3>
 // 作用域插槽
 <slot :data="data"></slot>
 </p>
</template>
 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue实现购物车的小球抛物线效果详解

AngularJS1.x应用怎么迁移至React

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Slot und Slot-Scope in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!