Ausführliche Erläuterung der praktischen Schritte zur Wiederverwendung von Inhalten bei der Slot-Verteilung in Vue

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur bequemen Wiederverwendung von Inhalten der übergeordneten Slot-Verteilung in Vue. Was sind die Vorsichtsmaßnahmen für die einfache Wiederverwendung von Inhalten der übergeordneten Slot-Verteilung in Vue? Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Vorab geschrieben

Ich habe zuvor einen Artikel über die Implementierung der Dialogsitzungskomponente durch Vue geschrieben http://www.jb51.net /article /139218.htm

sprach über die Implementierung einer Vue-Dialogkomponente, die die Kommunikation zwischen der übergeordneten Komponente und der untergeordneten Komponente umfasst. Dies kann natürlich auch durch das Lesen meines vorherigen Artikels verstanden werden Am Ende gesagt: Jetzt können wir Slots zum Schreiben von Komponenten verwenden. Slots werden zum Verteilen von Inhalten auf Unterkomponenten verwendet, wodurch ein hohes Maß an Wiederverwendung von Komponenten erreicht und die geschriebenen Komponenten flexibler werden.

Noch ein Beispiel für die Kombination von Dialogfeldern und die Verwendung von Slots zur Implementierung von Dialogkomponenten

Registrieren Sie eine globale Komponente mit dem Namen dialog-tip

 Vue.component('dialog-tip', {
   template: '#dialog-tip',
   props:['dialogShow','message'],
   data:function(){
    return {
     content:''
    }
   },
   methods:{
   }
  });

Verwenden Sie das templatet-Tag, um diese Komponente zu definieren

<template id="dialog-tip">
  <p class="dialog_tip" v-if="dialogShow">
   <p class="dialog_tip--mask"></p>
   <p class="dialog_tip--content">
    <p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>
   </p>
  </p>
 </template>
<template id="dialog-tip">
  <p class="dialog_tip" v-if="dialogShow">
   <p class="dialog_tip--mask"></p>
   <p class="dialog_tip--content">
    <p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>
   </p>
  </p>
 </template>

Der Inhalt der Komponente besteht aus zwei Teilen, einem ist der Eingabeaufforderungsinhalt und der andere ist die Schaltfläche. Wir werden den Slot verwenden, um den zu ändernden und zu ersetzenden Inhalt einzuschließen,
damit das übergeordnete Element Die Komponente kann den Inhalt an die untergeordnete Komponente verteilen.

<p class="dialog_tip--contenttxt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </p>
    <p class="dialog_tip--contentbtns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </p>

Zusätzlich zu den Standard-Slots können Sie auch benannte Slots definieren. Wenn mehrere Teile der Komponente ersetzt werden müssen, können wir einen Namen dafür definieren, zum Beispiel:

<slot name="msg">请输入1-8000之间任意整数</slot>

Auf diese Weise geben Sie bei Verwendung der Komponente den Namen des Slots an. Dieser Teil des Inhalts wird ersetzt und andere Slot-Inhalte werden nicht ersetzt

<p slot="msg">请输入正确手机号</p>

Verwenden Sie die definierte Dialogkomponente

<dialog-tip message="hello" :dialog-show="dialogShow.tip3">
   <p slot="msg">请输入正确手机号</p>
   <button class="btn" @click="closeDialogTip(&#39;tip3&#39;)">确定</button>
  </dialog-tip>
  <dialog-tip message="hello" :dialog-show="dialogShow.tip4">
   <p slot="msg">抱歉，没有此用户，请核实后输入</p>
   <button class="btn" @click="closeDialogTip(&#39;tip4&#39;)">重新输入</button>
   <button class="btn" @click="reg">去注册</button>
  </dialog-tip>

Wenn Sie den Namen des Slots nicht angeben, ersetzt der Inhalt im Standarddialog-Tip-Tag den im Slot enthaltenen Inhalt Die Unterkomponente verwendet beispielsweise den Slot. Geben Sie seinen Namen an, um den entsprechenden Slot-Teil in der Unterkomponente zu ersetzen. Inhalte, die nicht den Slot verwenden, um den Namen anzugeben, ersetzen standardmäßig den Teil des Unterkomponente

Es ist zu beachten, dass, wenn der Inhalt, der verteilt werden muss, nicht im Dialog-Tip-Tag definiert ist, der Standard-Slot-Inhalt in der Unterkomponente angezeigt wird

Für mehr Slot Verwendung, bitte verschieben Sie die Schritte

cn.vuejs.org/v2/guide/components-slots.htmlFinal

Rendering

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der praktischen Schritte zur Wiederverwendung von Inhalten bei der Slot-Verteilung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!