web-dev-qa-db-ja.com

vuetifyで「スロットアクティベーター」はどのように機能しますか？

Vuetifyの定義済みテンプレート「Googleコンタクト」を使用しています。

リンク： https://vuetifyjs.com/en/examples/layouts/googleContacts

私はVuetifyの初心者であり、一部のコードを理解するのが困難です。 1つは 'slot activate'です。

サンプルコード：

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

「スロットアクティベーター」の仕組みを教えてください。

vue.jsvuejs2vuetify.js
23
Md. Harun Or Rashid

Vueコンポーネントを宣言するとき、 Named Slots を作成できます。これはVuenative機能（Vuetifyからではない）：

たとえば、次のテンプレートを持つapp-layoutコンポーネントがあるとします。

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

親マークアップ：

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

テンプレート宣言の例の<slot name="header"></slot>に注意してください（上記の最初のコードブロック）。誰かがそのコンポーネントを使用すると、<h1 slot="header">Here might be a page title</h1>を宣言できます。このコードは、最終マークアップで<slot name="header"></slot>の位置を取ります。

<slot>sの動作のデモは次のとおりです。

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>

あなたのコード

例 ：を表示します

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

ご覧のとおり、このコードはv-list-tileを親コンポーネント（v-list-group）のactivatorslotに配置しようとします。

公式ドキュメント （含む 古いバージョン ）を見て、<v-list-group>にactivatorという名前のスロットがあるかどうかは言及されていません。

しかし、<v-list-group> 's SOURCE CODEを見ると、存在することがすぐにわかります。

27
acdcjunior