Comment utiliser les emplacements dans Vue pour distribuer les composants parents

Cette fois, je vais vous montrer comment utiliser le slot slot dans Vue pour distribuer le composant parent. Quelles sont les précautions concernant l'utilisation du slot slot dans Vue pour distribuer le composant parent. cas pratique. Jetons un coup d'oeil.

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

Analyse du cas d'utilisation de l'écouteur interne de Vue.js

Comment utiliser le chargement du composant Vue SSR

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!