--- theme: cyanosis highlight: a11y-dark --- > 作者：小土豆 > 博客园：[https://www.cnblogs.com/HouJiao/](https://www.cnblogs.com/HouJiao/) > 掘金：[https://juejin.im/user/2436173500265335](https://juejin.im/user/2436173500265335) ## 什么是插槽在日常的项目开发中，当我们在编写一个完整的组件时，不可避免的会引用一些`外部组件`或者`自定义组件`。 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb28fd810b6d46bfae327048b5353d96~tplv-k3u1fbpfcp-watermark.image) 有了这种`引用关系`之后，我们就可以把它们称为`父组件`或者`子组件`，同时`父子组件`之间有很多的通信方式，比如可以通过`props`向`子组件`传递数据，或者通过`$emit`、`$parent`调用`父组件`中的方法。下面就是一个非常简单的`父组件`引用`子组件`的例子。 ```html ```` 接着我们在`App`组件中引用`Child`组件。 ```html ``` 最后运行项目，`子组件`的内容成功被引用并展示在页面上。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/605e364310034df2969841331912e1e7~tplv-k3u1fbpfcp-watermark.image) 那假如我们现在有这样一个需求：在引用`Child`组件的同时，希望在`Child`组件的`指定位置`插入一段内容：`

欢迎大家关注小土豆

`。如果我们直接将内容写入``内部，是不会生效的。 ```html ``` 可以看到并未达到预期效果： ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/955ca4fee17c47e89e38e022fba2833b~tplv-k3u1fbpfcp-watermark.image) 那为了解决类似这样的问题，`Vue`就设计出来了`slot`这个东西。`slot`翻译过来叫做`插槽`，也可称其为`Vue`的内容分发机制，它的主要作用就是向`子组件`的`指定位置`插入一段内容，这个内容可以是`HTML`或者`其他的组件`。 ## 默认插槽在前面一节内容里，我们提出了一个需求：在引用`Child`组件的同时，希望在`Child`组件的`指定位置`插入一段内容：`

欢迎大家关注小土豆

`。那这个需求如何使用`插槽`来实现呢？我们来实践一下。首先我们需要在`子组件`中写入``，同时这个在``标签内部可以有默认的内容，比如`我是这个slot里面本来的内容` ```html ``` 接着就是在`父组件`中传入我们希望插入到`子组件`中的内容。 ```html ``` 此时在运行项目，就能看到`

欢迎大家关注小土豆

`这段内容已经成功的显示在页面上。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/985bbee3c6344d71bd36bcaf17b65e7e~tplv-k3u1fbpfcp-watermark.image) ## 具名插槽 `具名插槽`就是给我们的`插槽`起一个名字，即给``定义一个`name`属性。 ```html ``` 给`插槽`起了名称以后，我们在`父组件`中就可以使用`v-slot:name`或者`#name`往指定的`插槽`填充内容。 > `#name` 是`v-slot:name`的简写形式下面我们就来实践一下`具名插槽`。首先是在`子组件（Child.vue）`中定义`具名插槽`。 ```html ``` 接着在`父组件（App.vue）`中使用。 ```html ``` 运行项目就能看到对应的内容被插入到对应的插槽内： ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a13e6f4c87f4deeb653fccf7a764c1d~tplv-k3u1fbpfcp-watermark.image) ### 补充内容——默认插槽的`name`属性其实关于前面的`默认插槽`它也是有`name`属性的，其值为`default`，所以在`父组件`中也可以这样写： ```html ``` ### 补充内容——`

欢迎大家关注小土豆

欢迎大家关注小土豆

欢迎大家关注小土豆

欢迎大家关注小土豆

欢迎大家关注小土豆

element-ui组件

欢迎大家关注小土豆

欢迎关注小土豆

欢迎关注小土豆

欢迎关注小土豆

欢迎关注小土豆

element-ui组件

{{title}}

{{title}}

欢迎关注小土豆

欢迎关注小土豆

element-ui组件

element-ui组件