So verwenden Sie Slots in Vue, um übergeordnete Komponenten zu verteilen

Dieses Mal zeige ich Ihnen, wie Sie den Slot-Slot in Vue zum Verteilen der übergeordneten Komponente verwenden Werfen wir einen Blick darauf.

Vorab geschriebenIch 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

, die keinen benannten Slot definiert.

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

https://

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

FinalRendering

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:

Vue.js interne Listener-Anwendungsfallanalyse

So verwenden Sie das Laden von Vue SSR-Komponenten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Slots in Vue, um übergeordnete Komponenten zu verteilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!