[Vue] 仔细说一说vue的插槽语法01

插槽语法有版本新旧，建议大家看新版本的语法，不要看旧的语法，避免在语法的新旧上有混淆。
以下正文部分代码都使用新版语法进行演示。

首先是匿名插槽(Default slot)和具名插槽(Named slots)。

这里补充我来定义两个名词，方便后文说明。
1、分发处 - 分发处留空,等待内容填入。
2、使用处 - 在使用处放置text / html，使用处的内容会填充到分发处。

匿名插槽(Default slot)

若只需要一个分发处，这个时候可以用匿名插槽。
匿名插槽，就是默认插槽，使用处的内容都会放置在这个默认插槽的位置。

那么可以直接在模板内(Panel.vue中)添加一个标签（ 标签是分发的入口）。
↓ Panel.vue

这样即可。

使用时，在组件标签内( ..这里.. )中直接输入需要插入的内容。

    
        hello slot  (这里是使用处)
    

hello slot就会出现在上面分发处的位置。
注意： 标签在html中不存在。

具名插槽(Named slots)

如果有多个分发处(要留出多个位置来放置内容)，这时就要区分各个分发处的名称(给插槽加个名字)，这时候就需要具名插槽了。

具体做法是可以在模板内(Panel.vue中)加入solt标签  并给它一个name属性。
↓ Panel.vue

使用时，在组件标签内( ) 中需要使用插槽的标签上加上slot属性。
slot属性所在的标签可以是