我正在使用Vuetify预定义的模板'Google Contacts'。
链接: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):
例如,假设我们有一个带有以下模板的
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/[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很快就证明确实存在一个。