插槽
$slots
$slots代表当前组件的slot列表。
element-ui的menu-item-group组件源码：
代码
<template>
<li class="el-menu-item-group">
<div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
<template v-if="!$slots.title">{{title}}</template>
<slot v-else name="title"></slot>
</div>
<ul>
<slot></slot>
</ul>
</li>
</template>
该组件的$slots：{title: Array(1), default: Array(4)}
如果只需要简单的字符串title，可以这么做
代码
<el-menu-item-group title="分组一">
<el-menu-item index="foo" >选项1</el-menu-item>
<el-menu-item index="bar">选项2</el-menu-item>
</el-menu-item-group>
如果需要复杂的title样式，可以使用slot这么做
代码
<el-menu-item-group>
<template slot="title"><div><span>分组一</span></div></template>
<el-menu-item index="foo" >选项1</el-menu-item>
<el-menu-item index="bar">选项2</el-menu-item>
</el-menu-item-group>
v-slot
作用域插槽2.6.0之前的版本是使用slot-scope属性，由于在嵌套的slot时，slot-scope不能明确指出所属slot，因此设计出v-slot合并slot和slot-scope属性。
slot-scope绑定的数据是slot标签上的attributes，例如：
- Foo.js
代码
export default {
name: "Foo",
template:
`<div>
<span>I can Foo, title = {{title1}}</span><br>
<slot :custom="title1" staticAttr="I am a static Attr." name="test"></slot>
</div>`
,
data() {
return {
title1: "I am a dynamic bind Attr."
}
}
}
- Bar.js
代码
import Foo from "./Foo.js";
export default {
name: "Bar",
components: {
Foo
},
template:
`<div>
<span>I am a Bar, title = {{title2}}</span>
<foo v-slot:test="scope">
<span>foo, body is {{scope}}</span>
</foo>
</div>`
,
data() {
return {
title2: "LiLei"
}
}
}
最后浏览器输出
代码
I am a Bar, title = LiLei
I can Foo, title = I am a dynamic bind Attr.
foo, body is { "custom": "I am a dynamic bind Attr.", "staticAttr": "I am a static Attr." }
props
ABOUT ME
