Vue插槽详解

后来又去仔细研究了一下作用域插槽，最后终于成功的开发完成了，下面想和大家分享一下我通过开发这个组件对于插槽的一些新的理解，由于本人才疏学浅，所以有什么不妥的地方还希望各位大佬们指正。

下面我主要分为三部分讲解，默认插槽、具名插槽和作用域插槽，默认插槽和具名插槽比较容易理解所以下面不用解释太多，主要是分享一些对作用域插槽的理解。

默认插槽又被称为单个插槽、匿名插槽，默认插槽的使用是最方便的，只需要在子组件需要插入父组件传入内容的地方加上即可，下面通过一个简单的例子展示一下：

父组件：

子组件：

渲染的dom：

效果图：

子组件：

这里是头部，下面是插槽

这里是底部，下面是插槽

效果图：

具名插槽就是有名字的插槽，就和我们的名字一样，用来区分插入的位置，这样就解决我们上面的问题。 父组件：

子组件：

这里是头部，下面是插槽

这里是底部，下面是插槽

效果图：

接下来主角要登场了，来揭开作用域插槽的神器面纱。

官网是这样描述的：有时让插槽内容能够访问子组件中才有的数据是很有用的。显然作用于插槽的作用就是使父组件能够引用子组件中的数据。 下面用一个简单地例子展示一下： 父组件：

子组件：

效果图：

有这样一个场景，一个级联选择器，根据不同的应用场景渲染不同的变量，而且在不同的场景下可以进行不同而操作，比如编辑、删除等，那么想用这个组件是不是要对传入的数据的格式做严格的规定，这样组件的复用性是不是就变得很差了呢？但是通过作用域插槽就可以实现了呢。下面用一个简单地例子解释：

父组件：

子组件：

效果图：

在学习插槽时一直不太明白作用域插槽到底是什么，下面我总结了几点来理解作用域插槽。

注意：子组件中的data要和父组件中的data保持名称一致

那么上面这个例子的数据传递的步骤是

有时我们发现在子组件中并拿不到要传给插槽的数据，可能要在子孙组件中的才可能拿到，这时我们应该怎么办呢？

demo.vue

父组件：

子组件：

我起初是这样写，结果报错了

下面看一下我改正后的代码：

父组件：

子组件：

结果：

最后来补充一下后备内容，后备内容是指在父组件没有给slot传值时被渲染的内容，具体实现如下：

这只是我的一些认识和理解，希望可以帮助更好的理解一下插槽，最后本文中如有不正确的地方，希望各位大佬斧正。