vue.js - 'slot activator' 在 vuetify 中如何工作？

Question

我正在使用 Vuetify 预定义模板“Google 联系人”。

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

我是 Vuetify 的新手，在理解某些代码时遇到困难。一种是'slot activator'。

示例代码:

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

谁能告诉我“插槽激活器”是如何工作的？

Answer 1

当你声明一个Vue组件时，你可以创建Named Slots ，这是一个 Vue native 特性(不是来自 Vuetify):

For example, suppose we have an app-layout component with thefollowing template:

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

Parent markup:

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

The rendered result will be:

<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> 的演示行动中:

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

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

你的代码

你显示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 很快证明确实存在。