具名插槽
- 具名插槽 :
<slot name="io"></slot>
- 使用方法, 在 使用子组件的时候,它的子级节点 必须加
slot="io"
- 示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<zhuban>
<span slot="center">cpu</span>
<span slot="io">显卡</span>
<span slot="io">内存条</span>
<span slot="io">硬盘</span>
</zhuban>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var zhuban = {
template: `<div>
主板上都有:<br/>
<ul>
<li>io:<slot name="io"></slot></li>
<li>大脑:<slot name="center"></slot></li>
</ul>
</div>`
}
var app = new Vue({
el: "#app",
data: {
},
components: {
zhuban
}
})
</script>
</body>
</html>
- 运行结果:
匿名插槽
- 子组件中写的
<slot></slot>
就做匿名插槽 - 使用子组件时,写在子组件中间的子级节点信息,可以插入到 子组件的标签的位置
- 示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<zhuban>
<span>cpu</span>
<span>显卡</span>
<span>内存条</span>
<span>硬盘</span>
</zhuban>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var zhuban = {
template: `<div>
主板上都有:<slot></slot>
</div>`
}
var app = new Vue({
el: "#app",
data: {
},
components: {
zhuban
}
})
</script>
</body>
</html>
作用域插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<child2 v-slot="name">
{{name.myuser.firstName}}
{{name.myuser.lastName}}
</child2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var child1 = {
data() {
return {
user: {
firstName: "yin",
lastName: "ruifang"
}
}
},
template: `
<div>子组件
<slot></slot>
</div>
`
}
var child2 = {
data() {
return {
user: {
firstName: "yin",
lastName: "ruifang"
}
}
},
template: `
<div>子组件
<slot :myuser = "user"></slot>
</div>
`
}
var app = new Vue({
el: "#app",
data: {
},
components: {
child1,
child2,
}
})
</script>
</body>
</html>
- 运行结果: