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

我正在使用Vuetify预定义的模板“Google联系人”。
链接:https://vuetifyjs.com/en/examples/layouts/googleContacts
我是Vuetify的新手，在理解某些代码方面遇到困难。一种是'插槽激活器'。
样例代码:

    <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组件时，可以创建Named Slots，这是 Vue的本机功能(不是来自Vuetify):



注意示例模板声明中的<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/[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>

您的密码

您显示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 很快就证明确实存在一个。

关于vue.js - 'slot activator'在vuetify中如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49079936/