“插槽激活器”如何在 vuetify 中工作?

Posted

技术标签:

【中文标题】“插槽激活器”如何在 vuetify 中工作?【英文标题】:How does 'slot activator' work in vuetify? 【发布时间】:2018-08-11 07:21:21 【问题描述】:

我正在使用 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>

谁能告诉我'slot activator'是如何工作的?

【问题讨论】:

【参考方案1】:

当你声明一个 Vue 组件时,你可以创建 Named Slots,这是一个 Vue native 特性(不是来自 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>

请注意示例模板声明中的&lt;slot name="header"&gt;&lt;/slot&gt;(上面的第一个代码块)。当有人使用该组件时,她可以声明&lt;h1 slot="header"&gt;Here might be a page title&lt;/h1&gt;,此代码将在最终标记中取代&lt;slot name="header"&gt;&lt;/slot&gt;

这是&lt;slot&gt;s 的演示:

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 放置在父组件(v-list-group)的activator slot 中。

查看the official docs(包括the old version),没有提及&lt;v-list-group&gt; 是否有一个名为activator 的插槽。

但是看看 &lt;v-list-group&gt;'s SOURCE CODE 很快就证明确实存在。

【讨论】:

很好的解释!谢谢。你能给我提供 Vue 或 Vuetify 简单教程的链接吗? @Md.HarunOrRashid 我找不到与 activator 一词直接相关的任何文档。 阅读答案的结尾。插槽的名称是任何东西。他们称它为activator,因为他们想这样做。检查他们的代码:github.com/vuetifyjs/vuetify/blob/… 可能是其他任何东西,它的工作原理是一样的。

以上是关于“插槽激活器”如何在 vuetify 中工作?的主要内容,如果未能解决你的问题,请参考以下文章

如何让别名在所有 shell 中工作?

如何解决 Http 401 错误,但在邮递员中工作,而不是在 xamarin 表单中工作

%符号如何在javascript中工作[重复]

如何使 PFQueryTableView 在 UIViewController 中工作

如何使用 ImagePicker 获取图像名称?我得到了图像名称,但它只在模拟器中工作,而不是在实际设备中工作

$packageName.$activityClass 如何在布局 XML 文件中工作?