“插槽激活器"如何在 vuetify 中工作? [英] How does 'slot activator' work in vuetify?

问题描述

我正在使用 Vuetify 预定义模板Google 通讯录".

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

我是 Vuetify 的新手，在理解某些代码时遇到了困难.一种是'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 native 功能(不是来自 Vuetify):<块引用>

例如，假设我们有一个 app-layout 组件以下模板:

<标题>

父标记:

<h1 slot="header">这里可能是页面标题</h1><p>主要内容的段落.</p><p>还有一个.</p><p slot="footer">这是一些联系信息</p></app-layout>

渲染结果将是:

<标题><h1>这里可能是页面标题</h1></标题><主要><p>主要内容的段落.</p><p>还有一个.</p></main><页脚><p>这是一些联系信息</p></页脚>

注意示例模板声明(上面的第一个代码块)中的 .当有人使用该组件时，她可以声明 <h1 slot="header">Here may be a page title</h1> 并且此代码将采用 <slot name="header"></slot> 在最终标记中的位置.

下面是 的演示:

Vue.component('mycomponent', {模板:#mycomponenttemplate"})新的 Vue({el: '#app'});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></脚本><div id="应用程序"><应用程序布局><h1 slot="header">这里可能是页面标题</h1><p>主要内容的段落.</p><p>还有一个.</p><p slot="footer">这是一些联系信息</p></app-layout>

<模板 id="mycomponenttemplate"><div class="容器"><标题>

</template>

您的代码

您展示示例:

如您所见，此代码尝试将 v-list-tile 放在父组件的 activator slot 中(<代码>v-list-group).

查看官方文档(包括旧版本)，如果<v-list-group> 有一个名为 activator 的插槽.

但看看"errel="nocode> 的源代码 很快证明确实存在一个.

I am using Vuetify predefined Template 'Google Contacts'.

Link: https://vuetifyjs.com/en/examples/layouts/googleContacts

I am new in Vuetify and facing difficulties understanding some codes. One is 'slot activator'.

Sample Code:

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

Can anybody tell me how 'slot activator' works?

解决方案

When you declare a Vue component, you can create Named Slots, which is a Vue native feature (not from Vuetify):

For example, suppose we have an app-layout component with the following 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>

Notice the <slot name="header"></slot> in the example template declaration (first code block above). When someone uses that component, she can declare <h1 slot="header">Here might be a page title</h1> and this code will take <slot name="header"></slot>'s place in the final markup.

Here's a demo of the <slot>s in action:

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>

Your code

You show the example:

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

As you can see, this code tries to place the v-list-tile in the activator slot of the parent component (v-list-group).

Having a look at the official docs (incl. the old version), there's no mention if the <v-list-group> has a slot named activator.

But a look at <v-list-group>'s SOURCE CODE quickly proves there does exist one.

这篇关于“插槽激活器"如何在 vuetify 中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！