vue 开发必须知道的36 个技巧（vue从入门到学会第九天--------插槽）
vue 开发必须知道的36 个技巧（vue从入门到学会第九天--------插槽）本章跟大家讲的关于插槽的知识比较简单，不过用法都是差不多，掌握好基础应对什么场景都不在话下。本文源码的照例还是关注公众号"简易编程网"然后在后台回复关键字vue9即可获取。从上面我们可以看出，子组件向父组件传递数据，父组件接收到了就将其显示；这样的话，就实现了子组件的内容由父组件决定是否显示。此时咱们的子组件就不能有任何内容，否则会把插槽默认的内容给覆盖掉的。具名插槽的作用是给插槽取名字，然后根据不同名字来实现不同的组件效果，我们来看下具体代码：在作用域插槽内，父组件可以拿到子组件的数据。如下：
一、前言插槽的出现是为了定制组件的功能，让组件成为一个主体，比如导航栏，侧边栏啥的，有了插槽，我们就可以写出易于维护的功能组件了，想要用一个组件实现不同功能，直接把一个组件装上插槽就完事了，下面让我们来看一下吧。
二、插槽插槽就是一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。组件虽然支持我们自定义属性，但是如果你给它中间一个其它标签或者值的时候，它是不会识别的，如下：
此时是无法识别这些内容的这里我们给他一个插槽，先来说说匿名插槽，也就是最简单的插槽使用方式。
1.匿名插槽
可以看到，只需在子组件中放入这组插槽标签，就能识别父组件中引入的子组件的内容了。当然了，如果你想直接使用插槽中的内容也可以，如下：
此时咱们的子组件就不能有任何内容，否则会把插槽默认的内容给覆盖掉的。
2.具名插槽具名插槽的作用是给插槽取名字，然后根据不同名字来实现不同的组件效果，我们来看下具体代码：
在作用域插槽内，父组件可以拿到子组件的数据。如下：
从上面我们可以看出，子组件向父组件传递数据，父组件接收到了就将其显示；这样的话，就实现了子组件的内容由父组件决定是否显示。
三、总结本章跟大家讲的关于插槽的知识比较简单，不过用法都是差不多，掌握好基础应对什么场景都不在话下。本文源码的照例还是关注公众号"简易编程网"然后在后台回复关键字vue9即可获取。
