1.具名插槽
如果给 组件内 设置 slot name 组件标签内的内容都会显示出来
如果我们想组件标签内的 内容我们可以 指定位置 指定内容显示
就需要给这些标签 设置不同的插槽,就需要使用 具名插槽
例子如下:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>具名插槽</title>
</head>
<body>
<div id="app">
<name-Card>
<p>18622553666</p>
<span slot="name">个人信息</span>
<h1 slot="tel">15836362555</h1>
<template slot="address">河南郑州高新区万科城
</template>
<p>这个没有slot指令 的 标签内容 我们叫匿名插槽
没有指定slot属性的内容会被显示在匿名slot中
如果组件没有匿名slot 这部分内容就被丢弃,不显示
</p>
</name-Card>
</div>
<script src="../zuoye/作业-星级评分/vue.js"></script>
<script type="text/html" id="name-card">
<div>
<!-- 匿名插槽 没有name属性 -->
<slot></slot>
<h3>姓名:<slot name="name"></slot></h3>
<p>电话:<slot name="tel"></slot></p>
<p>家庭住址:<slot name="address"></slot></p>
</div>
</script>
<script>
var nameCard = {
template:"#name-card"
}
new Vue({
el:"#app",
components:{
nameCard
}
})
</script>
</body>
</html>
注意:如果你想显示内容 不需要标签
组件渲染的时候 会根据这个slot的属性值
去组件内找 name 为 address 的 slot标签
然后 这个slot 标签 替换成标签内容
2.作用域插槽
官网代码演示:
小实例: 感觉像 父子 组件传值一样
绑定的属性 都会在 插槽slot-scope属性对应的值
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scope</title>
</head>
<body>
<div id="app">
<!-- 作用域插槽 scope -->
<com1>
<template slot="s1" slot-scope="scope1">
<p>{{scope1.subData}}</p>
<hr>
{{scope1.subData}}--{{scope1.abc}}
</template>
</com1>
</div>
<script src="../zuoye/作业-星级评分/vue.js"></script>
<script type="text/html" id="component1">
<div>
<h1>子组件</h1>
<p>
<slot name="s1" :subData="subData" abc="123"> </slot>
</p>
</div>
</script>
<script>
var com1 = {
template:"#component1",
data:function(){
return{
subData:"翠花"
}
}
}
new Vue({
el:"#app",
data:{
appData:"张三"
},
components:{
com1
}
})
</script>
</body>
</html>
![git push origin main 报错：remote: Support for password authentication was removed on August 13, 2021[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)