嘿，今天咱来聊聊 Vue 里的插槽这玩意儿。说实话，这玩意儿在 Vue2 和 Vue3 里douNeng用，但写法上有点小变化，咱今天就来唠唠这个“插槽”到底是啥，怎么用，以及 Vue2 和 Vue3 有啥区别。

插槽是啥？

咱先说说插槽是干啥的。你懂的，就是子组件里留个“坑”，父组件往里填内容。就像你去餐厅吃饭，菜是厨房Zuo好的，但你Ke以自己加点调料，对吧？插槽就是这个“加调料”的地方。

比如你写了个弹窗组件，弹窗标题、内容、按钮这些地方，你douKe以让父组件自己决定。这样组件就灵活多了对吧？

插槽这玩意儿，说白了就是组件复用的神器。你写一次组件，别人用的时候Ke以自己决定里面放啥内容，多香啊！

默认插槽

咱先从Zui简单的开始，叫默认插 槽，也叫匿名插槽。就是子组件里写个 ，父组件传啥进去，它就显示啥。比如：

父组件里这么写：

  我是父组件传的内容

子组件里啥也不写，就一个 ，父组件传啥，它就显示啥。简单粗暴，对吧？

这玩意儿在 Vue2 和 Vue3 里dou一样，没啥区别。你要是写个默认内容，比如“我是默认内容”，那父组件不传内容的时候就显示这个。传了就覆盖掉。是不是hen贴心？

具名插槽

那要是你想在一个组件里放多个插槽呢？比如一个卡片组件，有头、身体、脚，那咋整？

这时候就得用具名插槽了。子组件里写：

父组件里这么写：

你kan，这样就Neng把内容分门别类地插进去了是不是hen清晰？

在 Vue2 里你还Ke以用 slot="xxx" 这种写法，但 Vue3 里就不推荐了统一用 v-slot。比如：

或者简写成：

所以啊，Vue3 里推荐dou用 v-slot，别再用 slot="xxx" 了虽然 Vue2 里还Neng用，但 Vue3 里Yi经不推荐了早晚要被淘汰的，咱还是提前适应吧。

作用域插槽

那啥时候要用作用域插槽呢？

就是子组件里有数据，但父组件想自己决定怎么显示这些数据的时候。比如子组件里有个列表，但父组件想自己决定每一项怎么显示，这时候就得用作用域插槽了。

子组件里这么写：

父组件里接收：

你kan，子组件把数据通过 v-slot 传出来父组件再决定怎么显示。是不是hen灵活？

在 Vue2 里你Ke以用 slot-scope 接收，但 Vue3 里Yi经废弃了统一用 v-slot。所以啊，咱还是直接用 v-slot 吧，省得以后还得改。

Vue2 和 Vue3 的区别

说实话，Vue2 和 Vue3 的插槽核心机制是一样的，但语法上有点小变化。

Vue2 里Ke以用 slot="xxx"，也Ke以用 v-slot:xxx，但 Vue3 里只推荐用 v-slot，而且必须配合