VUE-插槽的学习心得
一、插槽的作用1、插槽在template属性模版之中设置,假设有个<navigation-link"></navigation-link>模版,可在其中设置插槽<slot></slot>;2、在html文档中,凡是在<navigation-link"&a
·
一、插槽的作用
1、插槽在template
属性模版之中设置,假设有个<navigation-link"></navigation-link>
模版,可在其中设置插槽<slot></slot>
;
2、在html文档中,凡是在<navigation-link"></navigation-link>
标签内的代码(元素、字符串),将被看做插槽的内容。
二、具名插槽
1、<slot>
元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
//模版
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
//html代码
<navigation-link>
<p>A paragraph for the main content.</p>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</navigation-link>
html文档中的两个<p>
将被放置在main中的slot里面,由于没有指明p的所属solt,p将会被全部归结到main中的slot中。
如果在template
中给main中的solt赋予个name="main"
属性,那么p将被忽略,除非将两个p放入<template slot="main">
中。
更多推荐
已为社区贡献1条内容
所有评论(0)