子组件中的slot就是预留了一个空间，父组件可以往这个空间里插入内容，同时可以为这个slot默认设置一段内容，当父组件没有插入内容时就显示默认内容。

匿名插槽

匿名插槽就是没有名字的插槽，子组件里写个插槽，父组件往里面插入内容就行了

代码：

匿名插槽代码

显示结果：

显示结果

具名插槽

具名插槽就是给子组件模板里的slot设置名字，父组件想要使用哪个插槽就指定哪个插槽的名字，以此替换相对应的插槽。（较于匿名插槽，具名插槽更有针对性）

举个例子~

1.挂载好父组件和子组件

挂载父子组件

2.子组件的模板内容：

子组件模板

3.使用子组件：

旧版本使用slot属性的写法，但是这个方法已经被弃用啦：

旧方法slot使用

在2.6.0+后，用v-slot属性替代了slot ：

注意，v-slot必须添加到<template>中，不像已弃用的slot属性。此时<template>元素中的所有内容都将被传递到相应的槽中。 使用默认插槽可以继续用以前的写法，或者也把它加到<template>中: <template v-slot:default>

v-slot:center可以缩写成#center，但是哈：（其实记住缩写就好了）

注意如果不用缩写使用完整v-slot时是冒号！引用也没有双引号！！！在具明插槽里v-slot必须得这样用，只有在作用域插槽略有简化！！！

新属性v-slot的使用

4.显示结果：

(1)替换后的结果：

替换后的显示结果

（2）没有替换插槽，原本子组件的显示结果：

默认情况子组件显示

作用域插槽

提一嘴“编译作用域”：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。父子组件通讯需要使用prop、emit方法，但在插槽不用，而是使用slot prop方法来传递数据

匿名插槽和具名插槽都是直接使用一段HTML文本塞进去，或者绑定个父组件自己的数据再塞进去。但是作用域插槽不一样，它的存在是用来蹂躏子组件数据的

作用域插槽换个通俗的名字又叫“带数据的插槽”，简单来说就是父组件使用子组件的数据展现出各种想要展示的样子，比如：

假设子组件的代码和样式：子组件自己有一个language数组，我们把它以列表展示出来

子组件代码

显示出的样式

此时，父组件想用使用子组件，但是想要把这个Language数组换种样式显示出来，比如我想横着显示，我想换种颜色显示，那么这个时候就要用到作用域插槽了！！！

实例~：

1.创建子组件插槽：

 为了让language在父级的插槽内容中能使用，我们需要将language作为一个slot元素的一个属性绑定上去，这个属性就是一个slot prop。

子级插槽创建

2.父组件使用：

slot-scope被弃用咯！都换成v-slot了！

注意作用域插槽的缩写是v-slot=""，具名插槽是#slotname。不要搞混淆了，不然会让作用域不明确。

直接上缩写的写法了！这个slotprops也是随便取的名字，这个变量代表着所有的slot prop的集合对象，我们通过这个集合找到它的子元素data，前面说了data作为一个slot prop属性绑定在了slot中

父组件使用插槽

这里可以更简单的用解构插槽的写法：（对象解析没忘吧？！忘了去补笔记，锤你！）

<cpn v-slot = "{data}">...</cpn>

3.显示结果：

父组件成功拿到子组件的数据并把它横向排布了

显示的结

Add：当子组件有多个插槽时，记得是使用<template>，而不能直接在子组件标签上加了

引一个作用域插槽在显示商品信息的应用场景文章：vue作用域插槽，你真的懂了吗？ - 简书