一、什么是插槽
Vue官网：Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口。
个人理解：插槽就是将定义在父组件内的内容分配到子组件上。
二、默认插槽
初始实例文件（使用的是html，复制即可执行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-slot</title>
<style>
body{
text-align: center;
line-height: 100px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- 父组件A -->
<v-compa>
{{msg}}
</v-compa>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
//子组件
let CompA = {
template: "<div><slot></slot></div>",
data() {
return {
msgA: 1
}
}
};
//Vue实例
new Vue({
el: "#app",
data: {
msg: "vue实例"
},
components: {
'v-compa': CompA
}
});
</script>
</body>
</html>
打开浏览器我们可以看到vue实例的字样，该字样就是从父组件中的内容分发到子组件之中。如果去除子组件中的<slot>标签页面就会一片空白，即是子组件渲染时把父组件上的内容也一起渲染了。
//子组件
let CompA = {
template: "<div></div>", //去除<slot></slot>
data() {
return {
msgA: 1
}
}
};
三、具名插槽
具名插槽就是相当于key和value一样，父组件的标签上要定义v-slot:default属性（v-slot只能写在父组件的标签上），子组件的<slot name="default"></slot>。
//父组件
<div id="app">
<!-- 父组件A -->
<v-compa v-slot:default>
{{msg}}
</v-compa>
</div>
//子组件
//子组件
let CompA = {
template: "<div><slot name='default'></slot></div>",
data() {
return {
msgA: 1
}
}
};
如果不写v-slot:default，那么默认就是v-slot:default,default可已改为别的，比如:v-slot:header,那么<slot name='header'></slot>，一一对应的。
四、作用于插槽
作用于插槽主要是父组件接受子组件slot标签上的信息。
//父组件
<div id="app">
<!-- 父组件A -->
<v-compa v-slot:default='props'>
{{props.msg}}
</v-compa>
</div>
//子组件
//子组件A
let CompA = {
template: "<div><slot name='default' :msg='msgA'></slot></div>",
data() {
return {
msgA: 1
}
}
};
//浏览器（显示组件A的msgA的值）
这里的作用域插槽跟父子组件之间的通讯很像，子组件中通过<slot :msg='msgA'>中的msg来保存子组件中的信息。父组件中通过v-slot:default='props'中的props来保存子组件传过来的msg。props是一个的对象，不一定是以props命名。
五、总结
本次的笔记很简单，只是介绍了vue中的v-slot简单使用，并没有做太多的深入了解，其实在网上看了很多，都是按照官方的说法来写，所以没能好好理解。 最总的实例文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-slot</title>
<style>
body {
text-align: center;
line-height: 100px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- 父组件A -->
<v-compa v-slot:default='props'>
{{props.msg}}
</v-compa>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
//子组件A
let CompA = {
template: "<div><slot name='default' :msg='msgA'></slot></div>",
data() {
return {
msgA: 1
}
}
};
//Vue实例
new Vue({
el: "#app",
data: {
A: "组件A",
},
components: {
'v-compa': CompA
}
});
</script>
</body>
</html>
