slot插槽
Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。使用slot插槽,可以更好的实现组件复用。
具名插槽
可以将内容进行细分，指定内容放置的插槽位置。
作用域插槽
可以让内容使用插槽中绑定的数据，而不是父级中的变量。
示例代码（参照上面的解释及代码注释理解代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
<style>
#app {
width: 500px;
margin: auto;
border: 1px solid blue;
border-radius: 10px;
}
#wrapper1,
#wrapper2,
#wrapper3 {
width: 400px;
margin: 20px auto;
border: 1px solid red;
border-radius: 8px;
padding-left: 10px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child1>
<!--注意:要使用父级作用域中的变量,比如msg-->
<h2>今日头条</h2>
<p>详情{{msg}}</p>
<p>新闻评论</p>
</child1>
<child2>
<h1 slot="header">这是一个h1标题</h1>
<h2 slot="main">这是一个h2标题</h2>
<!--没有指定名字的,会插到没有名字的插槽中-->
<p>这是一个标签,没有指定slot</p>
<footer slot="footer">这是一个h5新增的footer标签</footer>
</child2>
<child3>
<template slot-scope="prop">
<p>备注：没有slot-scope,那么该范围的变量都是父级作用域的,有slot-scope,那么相当于使用的是给slot中绑定的变量</p>
<p>显示插槽中的text:{{prop.text}}</p>
<p>显示插槽中的num:{{prop.num}}</p>
</template>
</child3>
</div>
</body>
<template id="child1">
<div id="wrapper1">
<h1>这是子组件1</h1>
<!-- 用来接收写到子组件标签内部的内容,放到slot当中 -->
<slot>当你不写内容时,会显示</slot>
</div>
</template>
<!--具名插槽-->
<template id="child2">
<div id="wrapper2">
<slot name="header"></slot>
<slot name="main"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<!--作用域插槽-->
<template id="child3">
<div id="wrapper3">
<slot :text="szStr" :num="nNum"></slot>
</div>
</template>
</html>
<script>
/*
* 使用slot插槽,可以更好的实现组件复用
*/
let child1 = {
template: '#child1'
};
let child2 = {
template: '#child2'
};
let child3 = {
template: '#child3',
data() {
return {
szStr: '幸福',
nNum: 137
}
}
};
new Vue({
el: '#app',
components: {
child1,
child2,
child3
},
data: {
msg: '+摘要'
}
})
</script>