(图片来自网络，如有侵权请联系删除)
插槽(slot)
插槽就是占位符，可以理解为slot在组件标签中占了一个位置，当使用该标签的时候，组件标签里面的内容会自动填上这个位置。
使用场景
通过插槽可以让用户扩展组件，去更好的复用组件和对其做定制化处理。如果父组件在使用一个复用组件的时候，获取这个组件在不同的地方都有一定的差别。可以通过slot插槽向组件的内部的指定位置传递一些内容，完成这个组件在不同场合的使用。
比如对话框：有的兑换框需要按钮有的不需要，此时就可以用slot插槽占位，如果给它传按钮就显示按钮，如果不传就没有。
插槽分为三种：
- 默认插槽
- 具名插槽
- 作用域插槽
1、默认插槽
用slot标签来确定占位的位置，标签里面可以放默认的内容，当父组件中没有像指定的插槽插入内容，那么就使用默认的内容。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">
我是父组件
<component-a>
我插入到子组件
</component-a>
</div>
<body>
<script>
let ComponentA = {
template:`
<div>
我在插入位置的上方
<hr>
<slot></slot>
</div>
`,
data() {
return {
children:{name:'tom',age:19}
}
},
}
let vm =new Vue({
el:'#app',
components:{
ComponentA
}
})
</script>
</body>
</html>
2、具名插槽
具名插槽是默认插槽的加强，如果由很多个占位的话那么需要给他们起个名字，让他们与要插入的内容一一对应。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">
我是父组件
<component-a>
<template v-slot:header>
我是插入的header
</template>
我是插入的content
<template v-slot:footer>
我是插入的footer
</template>
</component-a>
</div>
<body>
<script>
let ComponentA = {
template:`
<div>
我在插入位置的上方
<hr>
<slot name='header'></slot>
<slot></slot>
<slot name='footer'></slot>
</div>
`,
data() {
return {
children:{name:'tom',age:19}
}
},
}
let vm =new Vue({
el:'#app',
components:{
ComponentA
}
})
</script>
</body>
</html>
3、作用域插槽
子组件绑定属性来将子组件中的信息传递给父组件使用。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<div id="app">
<component-a>
<template v-slot:default='slotprops'>
{{slotprops.childDate.name}}
</template>
</component-a>
</div>
<body>
<script>
let ComponentA = {
template:`
<div>
<slot v-bind:childDate='children'>
</slot>
</div>
`,
data() {
return {
children:{name:'tom',age:19}
}
},
}
let vm =new Vue({
el:'#app',
components:{
ComponentA
}
})
</script>
</body>
</html>
