Un guide complet des machines à sous Vue

Le cœur du développement d'applications Web moderne est des composants. Chaque application est composée de plusieurs composants qui fonctionnent ensemble pour former un tout. Pour être réutilisés dans différents scénarios et même dans différentes applications, ces composants doivent avoir la plus grande flexibilité et réutilisabilité. De nombreux cadres (Vue en particulier) utilisent un mécanisme appelé "machines à sous" pour répondre à ces besoins.

Les emplacements

sont un mécanisme de distribution et de combinaison de contenu puissant et polyvalent. Vous pouvez considérer les emplacements comme des modèles personnalisables (similaires aux modèles PHP) qui peuvent être utilisés à différents endroits et dans divers cas d'utilisation, produisant différents effets. Par exemple, dans un cadre d'interface utilisateur comme VueTtify, les machines à sous sont utilisées pour créer des composants communs, tels que les composants d'alerte. Dans ces composants, les créneaux servent d'espaces réservés au contenu par défaut et tout contenu supplémentaire / facultatif (tels que les icônes, les images, etc.).

Les emplacements

vous permettent d'ajouter n'importe quelle structure, style et fonctionnalité à des composants spécifiques. En utilisant des emplacements, les développeurs peuvent réduire considérablement le nombre d'accessoires utilisés dans un seul composant, ce qui rend les composants plus simples et plus faciles à gérer.

Ce didacticiel explorera comment profiter des créneaux de créneaux dans la vue 3. Commençons.

Points clés

• Les machines à sous Vue améliorent la flexibilité des composants: les emplacements dans Vue.js permettent un placement dynamique du contenu dans le composant, ce qui le rend hautement réutilisable et adapté à différents contextes.
• machines à sous de base et emplacements de portée: Vue propose deux types de créneaux: les machines à sous et les machines à sous. Les emplacements de base sont utilisés pour un remplacement de contenu simple, tandis que les emplacements de portée permettent d'accéder aux données des sous-composants, permettant une intégration de contenu plus complexe et interactive.
• Plusieurs emplacements et créneaux nommés ajoutent une complexité structurelle: pour les composants qui nécessitent plusieurs domaines de contenu, Vue prend en charge plusieurs machines à sous, y compris les machines à sous nommées, ce qui aide à organiser plus efficacement le contenu et à améliorer le maintien des fonctionnalités.
• Slots par rapport aux accessoires: Bien que les accessoires soient essentiels pour passer des données aux composants, les machines à sous fournissent une solution plus flexible pour gérer les structures de contenu complexes et réduire les dépendances sur les accessoires pour la distribution de contenu.
• Application pratique des machines à sous: les machines à sous Vue ne sont pas limitées au contenu statique, mais peuvent également être utilisées pour fournir des modèles complets ou des fonctions interactives, améliorant ainsi la fonctionnalité et l'interactivité des composants.
• Utiliser des emplacements avec des accessoires pour la meilleure conception de composants: la meilleure pratique consiste à utiliser des emplacements pour la gestion du contenu et les accessoires pour le traitement des données dans les composants, ce qui peut rendre les composants plus efficaces et plus clairs.

Utilisation de base de la machine à sous

Vue propose principalement deux emplacements: des emplacements simples et de la portée. Commençons par une simple fente. Considérez l'exemple suivant:

<code class="language-javascript">const app = Vue.createApp({})

app.component('primary-button', {
  template: `
    <button>
      <slot>OK</slot>
    </button>
  `
})

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')</code>

Ici, nous avons un composant bouton principal. Nous voulons que le texte du bouton soit personnalisable, nous utilisons donc le composant de l'emplacement à l'intérieur de l'élément de bouton pour ajouter des espaces réservés de texte. Si nous ne fournissons pas de valeurs personnalisées, nous voulons également une valeur commune par défaut (de repli) par défaut. Vue utilise tout ce que nous mettons dans le composant de l'emplacement comme contenu de l'emplacement par défaut. Nous devons donc simplement placer le texte "OK" à l'intérieur du composant. Maintenant, nous pouvons utiliser le composant comme ceci:

<code class="language-html"><div id="app">
  <primary-button></primary-button>
</div></code>

Le résultat est un bouton avec du texte "OK" car nous ne fournissons aucune valeur. Mais que se passe-t-il si nous voulons créer un bouton avec du texte personnalisé? Dans ce cas, nous fournissons du texte personnalisé dans l'implémentation des composants comme suit:

<code class="language-html"><div id="app">
  <primary-button>Subscribe</primary-button>
</div></code>

Ici, Vue prend le texte personnalisé "souscrit" et l'utilise au lieu du texte par défaut.

Comme vous pouvez le voir, même dans cet exemple simple, nous pouvons gagner beaucoup de flexibilité dans la façon de rendre des composants. Mais ce n'est que la pointe de l'iceberg. Regardons un exemple plus complexe.

Construisez un composant "phrase du jour"

Maintenant, nous allons construire un composant qui affiche une phrase quotidienne. Voici le code:

<code class="language-javascript">const app = Vue.createApp({})

app.component('quote', {
  template: `
    <div>
      <h2>The quote of the day says:</h2>
      <p>
        <slot></slot>
      </p>
    </div>
  `
})

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')</code>

<code class="language-html"><div id="app">
  <quote>
    <div class="quote-box">
      <span class="quote-text">"Creativity is just connecting things."</span>
      <br>
      - Steve Jobs
    </div>
  </quote>
</div></code>

<code class="language-css">.quote-box {
  background-color: lightgreen;
  width: 300px;
  padding: 5px 10px;
}

.quote-text {
  font-style: italic;
}</code>

Dans cet exemple, nous créons un titre dont le contenu restera le même, puis nous mettons le composant de l'emplacement dans le paragraphe dont le contenu changera en fonction des citations du jour. Lors du rendu d'un composant, Vue affichera le titre du composant de devis, suivi du contenu que nous mettons dans la balise de devis. Faites également attention aux classes CSS utilisées dans la création et la mise en œuvre de citations. Nous pouvons styliser le composant de deux manières au besoin.

en utilisant plusieurs machines à sous

Bien qu'un seul emplacement soit très puissant, dans de nombreux cas, cela ne suffit pas. Dans les scénarios réels, nous avons généralement besoin de plusieurs emplacements pour faire le travail. Heureusement, Vue nous permet d'utiliser autant de créneaux que nous le souhaitons. Voyons comment utiliser plusieurs emplacements en construisant un simple composant de carte.

Créer des composants de carte de base

Nous allons construire un composant de carte avec trois parties: titre, corps et pied de page:

<code class="language-javascript">const app = Vue.createApp({})

app.component('card', {
  template: `
    <div>
      <slot name="header"></slot>
      <main>
        <slot></slot>
      </main>
      <slot name="footer"></slot>
    </div>`
})

app.mount('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bapp')</code>

<code class="language-html"><div id="app">
  <card>
    <template v-slot:header>
      <h2>Card Header Title</h2>
    </template>

    <template v-slot:default>
      <p>
        Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
      </p>
    </template>

    <template v-slot:footer>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Save</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Edit</a> -
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Delete</a>
    </template>
  </card>
</div></code>

Afin d'utiliser plusieurs emplacements, nous devons fournir un nom pour chaque emplacement. La seule exception est la fente par défaut. Ainsi, dans l'exemple ci-dessus, nous ajoutons un attribut de nom aux emplacements d'en-tête et de pied de page. Les emplacements qui ne fournissent pas de noms sont considérés comme des emplacements par défaut.

Lorsque nous utilisons le composant de la carte, nous devons utiliser un élément de modèle avec la directive V-Slot et le nom de l'emplacement: V-Slot: [Slot-Name].

(La partie restante est omise ici car la longueur est trop longue. Veuillez conserver ou supprimer sélectivement du contenu au besoin.)

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!