Explication détaillée des étapes pratiques pour réutiliser le contenu dans la distribution de machines à sous dans Vue

Cette fois, je vais vous donner une explication détaillée des étapes pour une réutilisation pratique du contenu du composant parent de distribution de slot dans Vue. Quelles sont les précautions pour une réutilisation facile du contenu du composant parent de distribution de slot dans Vue ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Écrit devant

J'ai déjà écrit un article sur Vue implémentant le composant de session de dialogue http://www.jb51.net /article /139218.htm

a expliqué comment implémenter un composant de dialogue vue, qui implique la communication entre le composant parent et le composant enfant. Inutile de dire que cela peut également être compris en lisant mon article précédent. dit à la fin Maintenant, nous pouvons utiliser les slots pour écrire des composants. Les slots sont utilisés pour distribuer le contenu aux sous-composants, obtenant ainsi un degré élevé de réutilisation des composants et rendant les composants écrits plus flexibles.

Encore un exemple de combinaison de boîtes de dialogue, en utilisant des emplacements pour implémenter des composants de dialogue

Enregistrez un composant global nommé dialog-tip

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

Utilisez la balise modèle pour définir Le le contenu de ce composant

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

se compose de deux parties, l'une est le contenu de l'invite et l'autre est le bouton du bouton. Nous utiliserons slot pour inclure le contenu à modifier et à remplacer,
donc. que le composant parent peut distribuer du contenu à l'enfant à l'intérieur du composant.

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

En plus des emplacements par défaut, vous pouvez également définir des emplacements nommés. S'il y a plusieurs parties du composant qui doivent être remplacées, nous pouvons leur définir un nom, par exemple :

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

De cette façon, lors de l'utilisation du composant, spécifier le nom de l'emplacement remplacera cette partie du contenu sans remplacer les autres contenus de l'emplacement

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

Utilisez le composant de dialogue défini

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

Si vous ne spécifiez pas le nom de l'emplacement, le contenu de la balise d'astuce de dialogue par défaut remplacera le contenu contenu dans l'emplacement dans le sous -component, comme celui ci-dessus

Utilisez slot pour spécifier son nom pour remplacer la partie slot correspondante dans le sous-composant, et le contenu qui n'utilise pas slot pour spécifier le nom remplacera par défaut la partie du sous-composant
cela ne définit pas de slot nommé.

Il est à noter que si le contenu à distribuer n'est pas défini dans la balise dialog-tip, le contenu du slot par défaut sera affiché dans le sous-composant

Pour plus de slot utilisation, veuillez déplacer les étapeshttps://cn.vuejs.org/v2/guide/components-slots.html

Final

Rendu

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

A résumé de l'utilisation du module de journal nodejs winston

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!