一、首先我们要知道什么时slot？
1、slot（插槽） 是vue提出的一个概念，插槽用于决定需要携带的内容，可以指定插入的位置。
2、插槽的显示的内容由父组件去决定，显示的位置由子组件进行控制
3、通俗的理解，插槽就是一个“占位置”，在子组件中占好了位置后，内容由父组件决定。
二、slot的简单格式与类型呢
上面提到了使用插槽父子组件搭配着用，具体怎么用？格式怎么写？这里介绍我使用的一种情况。（小白一个）
1、slot单插槽与创建格式
子组件（创建一个.vue的文件）
我这里的插槽中携带了默认值
<template>
<div class="son">
<p style="color:red">这是子组件的内容</p>
<!-- 这里是父组件中插入的内容 -->
<slot>默认显示的值</slot>
</div>
</template>
<script>
export default {
name: "Son",
}
</script>
<style lang="scss" scoped>
</style>
父组件：
<template>
<div>
<p>这里是父组件的内容</p>
<!-- 先去导入子组件，然后去使用 -->
<Son>
<!-- 这里的内容就是父组件向子组件传递的内容，不传递的话就显示默认的值 -->
</Son>
</div>
</template>
<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
name: 'Home',
components: {
Son
},
}
</script>
效果图：
上面的效果图父组件并没有插入值，使用的是子组件中默认的值，下面这种情况，当父组件插入值的时候，会覆盖子组件插槽中的默认值。
父组件：
<template>
<div>
<p>这里是父组件的内容</p>
<!-- 先去导入子组件，然后去使用 -->
<Son>
<p style="color:blue">这是父组件插入的值</p>
</Son>
</div>
</template>
<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
name: 'Home',
components: {
Son
},
}
</script>
效果图：
2、具名插槽：子组件中有多个插槽，通过指定名称方式实现一 一对应。
子组件：
<template>
<div class="son">
<p style="color:red">这是子组件的内容</p>
<!-- 这里是父组件中插入的内容 -->
<slot name="header"></slot>
<slot>默认显示的值</slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: "Son",
}
</script>
<style lang="scss" scoped>
</style>
父组件：
<template>
<div>
<p>这里是父组件的内容</p>
<!-- 先去导入子组件，然后去使用 -->
<Son>
<div slot="header">
这是header部分
</div>
<p style="color:blue">这是父组件插入的值</p>
<div slot="footer">
这是footer部分
</div>
</Son>
</div>
</template>
<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
name: 'Home',
components: {
Son
},
}
</script>
效果图：
这里具名插槽的使用方式在VUE.JS官方文档中已经被废除了，但是还可以继续使用，也可以用新的方法v-slot（缩写#）去写，但是需要写在template中，具体可查看官方文档
3、作用域插槽
这里直接举两个列子
列子一:
子组件：
<template>
<div class="son">
<slot :data="user"></slot>
</div>
</template>
<script>
export default {
name: "Son",
data(){
return{
user:[
{name:"tom",age:'18',id:1},
{name:"tom1",age:'19',id:2},
{name:"tom2",age:'20',id:3},
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
父组件：
<template>
<div>
<!-- 先去导入子组件，然后去使用 -->
<Son>
<template slot-scope="user">
<div v-for="(item,index) in user.data" :key="item.id">
{{item}}
</div>
</template>
</Son>
</div>
</template>
<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
name: 'Home',
components: {
Son
},
}
</script>
效果图：
列子二：
获取到表格中一行内的数据
<template>
<div class="body">
<Son>
<div class="center">
<el-table
:data=" tableData"
border
style=" 540px">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
<el-table-column
label="操作"
width="180">
<template slot-scope="user">
<el-button @click="hand1(user.row)" type="primary">点击获取</el-button>
</template>
</el-table-column>
</el-table>
</div>
</Son>
</div>
</template>
<script>
// @ is an alias to /src
import Son from '@/components/son.vue'
export default {
name: 'Home',
components:{
Son
},
data(){
return{
tableData:[
{name:"tom",age:'18',id:1},
{name:"tom1",age:'19',id:2},
{name:"tom2",age:'20',id:3},
]
}
},
methods:{
hand1(e){
console.log(e)
}
}
}
</script>
效果图：
点击第一个
