“插槽激活器”如何在 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>
请注意示例模板声明中的<slot name="header"></slot>
(上面的第一个代码块)。当有人使用该组件时,她可以声明<h1 slot="header">Here might be a page title</h1>
,此代码将在最终标记中取代<slot name="header"></slot>
。
这是<slot>
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),没有提及<v-list-group>
是否有一个名为activator
的插槽。
但是看看 <v-list-group>
's SOURCE CODE 很快就证明确实存在。
【讨论】:
很好的解释!谢谢。你能给我提供 Vue 或 Vuetify 简单教程的链接吗? @Md.HarunOrRashid 我找不到与activator
一词直接相关的任何文档。
阅读答案的结尾。插槽的名称是任何东西。他们称它为activator
,因为他们想这样做。检查他们的代码:github.com/vuetifyjs/vuetify/blob/… 可能是其他任何东西,它的工作原理是一样的。以上是关于“插槽激活器”如何在 vuetify 中工作?的主要内容,如果未能解决你的问题,请参考以下文章
如何解决 Http 401 错误,但在邮递员中工作,而不是在 xamarin 表单中工作
如何使 PFQueryTableView 在 UIViewController 中工作