您的代码

Question

我正在使用Vuetify预定义模板＆＃39; Google通讯录＆＃39;。

链接：https://vuetifyjs.com/en/examples/layouts/googleContacts

我是Vuetify的新手，在理解某些代码方面遇到了困难。一个是＆＃39;插槽激活器＆＃39; 。

示例代码：

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

有人可以告诉我插槽激活器＆＃39;作品？

Answer 1

当您声明Vue组件时，您可以创建Named Slots，这是 Vue 原生 功能（不是来自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>的实际演示：

＆＃13;

Vue.component('mycomponent', {
  template: "#mycomponenttemplate"
})
new Vue({
  el: '#app'
});

＆＃13;

<script src="https://unpkg.com/vue@2.5.13/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>

＆＃13;

您的代码

您展示the example：

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

如您所见，此代码尝试将v-list-tile放置在父组件activator）的v-list-group 广告位中。

看看the official docs（包括the old version），如果<v-list-group>有一个名为activator的广告位，则不会提及。

但是看一眼 <v-list-group>'s SOURCE CODE 很快证明确实存在。

＆＃39;插槽激活器＆＃39;在vuetify工作？

1 个答案:

您的代码