目录

第一种插槽（匿名插槽）

第二种插槽（具名插槽）以及插槽简写

具名插槽的使用

第三种插槽(作用域插槽)

第四种插槽-写入插槽

写入插槽与具名插槽的区别？

Vue2slot-scope插槽用法

//vue2.x的写法 //2.x的写法{{scope.row.ce}} 

Vue3slot-scope插槽用法

 //3.x的新写法 -- #default="scope" $index{{row.ce}} 

看完觉得没了？恭喜你没走开，下面的更精彩，分享Vue3里面v-solt插槽的四种用法:

第一种插槽（匿名插槽）

现在我们封装一个组件，在组件中可以自定义内容。
这个时候我们就可以使用插槽了。
插槽可以将父页面中的内容展示在子组件中指定的位置。

父页面

//父页面 匿名插槽添加的数据 import ChaCao from "../components/ChaCao.vue"

//子组件
我是组件中标题
 

说明：

子当组件渲染的时候， 将会被替换为“匿名插槽添加的数据 ”。
插槽还可以包含任何模板代码，包括 HTML，或者其他组件。

第二种插槽（具名插槽）以及插槽简写

很多的时候，我们可能在组件的不同位置展示不同的内容。
这个时候我们就需要使用具名插槽。
跟 v-on 和 v-bind 一样，v-slot 也有缩写。
(v-slot:) 替换为字符 #
例如 v-slot:header 可以被重写为 #header：

具名插槽的使用

标题是学习vue3
正文是好好学习，天天向上
import ChaCao from "../components/ChaCao.vue"

子组件

我是组件中标题
========================
我是正文

第三种插槽(作用域插槽)

有时让插槽内容能够访问子组件中才有的数据是很有用的。
当一个组件被用来渲染一个项目数组时，这是一个常见的情况，
我们希望能够自定义每个项目的渲染方式。

作用域插槽的使用

父组件.vue 
下面这个电视剧是自定义的哈
 
这就是作用域插槽哈
 
电视剧名称:{{ slotProps.row.name }} 人物:{{slotProps.row.person }} 序号--{{ slotProps.index }} 
 import ChaCao from "../components/ChaCao.vue"let arr=[{name:'且试天下',person:'丰兰息'},{name:'请叫我总监',person:'小橘子'},{name:'你是我的荣耀',person:'路人甲',slotFlag:true},]

//子组件 
 
电视剧名称:{{ item.name }} 人物:{{item.person }} 序号:{{ index }} 
import {defineProps} from 'vue'defineProps({listArr:{type:Array,default:()=>{return []}},})

效果:

第四种插槽-写入插槽

//父页面{{ name }}==我在哪里import { ref,} from 'vue'const name = ref('header')

//子组件我是头部我是主体

写入插槽与具名插槽的区别？

最大的区别是name是动态的对于写入插槽来讲
具名插槽：具名插槽的name是固定值（静态值）

最后：逃不出去的浪浪山,才是每个打工人心底最大的恐惧