web-dev-qa-db-fra.com

Comment fonctionne 'activateur de créneau' dans vuetify?

J'utilise le modèle prédéfini Vuetify 'Google Contacts'.

Lien: https://vuetifyjs.com/en/examples/layouts/googleContacts

Je suis nouveau dans Vuetify et rencontre des difficultés pour comprendre certains codes. L'un est 'activateur de fente' .

Exemple de code:

<v-list-tile slot="activator">
    <v-list-tile-content>
        <v-list-tile-title>
            {{ item.text }}
        </v-list-tile-title>
    </v-list-tile-content>
</v-list-tile>

Quelqu'un peut-il me dire comment fonctionne le "activateur de machine à sous"?

vue.jsvuejs2vuetify.js
23
Md. Harun Or Rashid

Lorsque vous déclarez un composant Vue, vous pouvez créer des créneaux nommés , qui est un Vue native caractéristique (pas de Vuetify):

Par exemple, supposons que nous ayons un composant app-layout Avec le modèle suivant:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Balisage parent:

<app-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</app-layout>

Le résultat rendu sera:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

Notez le <slot name="header"></slot> Dans l'exemple de déclaration de modèle (premier bloc de code ci-dessus). Lorsque quelqu'un utilise ce composant, il peut déclarer <h1 slot="header">Here might be a page title</h1> Et ce code prendra la place de <slot name="header"></slot> Dans le balisage final.

Voici une démonstration du <slot> En action:

Vue.component('mycomponent', {
  template: "#mycomponenttemplate"
})
new Vue({
  el: '#app'
});
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <app-layout>
    <h1 slot="header">Here might be a page title</h1>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>

    <p slot="footer">Here's some contact info</p>
  </app-layout>
</div>

<template id="mycomponenttemplate">
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
</template>

Votre code

Vous montrez l'exemple :

<v-list-group
         ...
          >
            <v-list-tile slot="activator">
              ...
            </v-list-tile>

Comme vous pouvez le constater, ce code essaie de placer le v-list-tile Dans l’emplacement activator du composant parent (v-list-group).

En regardant la documentation officielle (y compris l'ancienne version ), il n'est pas mentionné si le <v-list-group> A un emplacement nommé activator .

Mais un coup d'oeil sur le code source de <v-list-group> prouve rapidement qu'il en existe un.

27
acdcjunior