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,

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

<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

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

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

FinalRendering

Empfohlene Lektüre:

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!