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

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

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

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

匿名插槽(Default slot)

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

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

<template id='panel'>
    <div class="panel">
        <div class="title">
            标题
        </div>
        <div class="content">
            <slot></slot>  (匿名插槽，分发处)
        </div>
        <div class="footer">
            更多信息
        </div>
    </div>
</template>

这样即可。

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

<div id="app">
    <Panel>
        hello slot  (这里是使用处)
    </Panel>
</div>

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

具名插槽(Named slots)

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

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

<template id='panel'>
    <div class="panel">
        <div class="title">
            <slot name='s1'></slot>
        </div>
        <div class="content">
            <slot name='s2'></slot>
        </div>
        <div class="footer">
            <slot name='s3'>我是默认值</slot>  // 分发处的默认值
        </div>
    </div>
</template>

使用时，在组件标签内( <Panel> </Panel> ) 中需要使用插槽的位置放入
<template v-slot:soltName></template>。

注意：
这一要求和插槽旧语法中的slot属性不同。
slot属性所在的标签可以是<div> <p> <template>等（没什么限制）。
而v-slot: 必须放置在<template>标签中。

v-slot:soltName的slotName，要和分发处<slot>标签的name属性对应的值相同 ("s1", "s2", "s3")，这是分发处的标识，让vue知道下面的内容要放置在哪个分发处的位置。

<div id="app">
    <Panel>
        <template v-slot:s1>标题</template>
        <template v-slot:s2>内容</template>
        <template v-slot:s3>期待更多</template>
    </Panel>
</div>

↑ 注： 

1. (使用处)写两个 v-slot:s1
   如 <template v-slot:s1>嘿嘿</template >  <template v-slot:s1>哈哈</template >
   那么这两个内容会同时出现在name='s1'的插槽分发处。

2. 设置默认值（<slot name='s3'>我是默认值</slot> ），起到占位符的效果

   <div class="footer">
    <slot name='s3'>我是默认值</slot>
   </div>

   上面这块代码块的效果就是用"我是默认值"当做占位符。
   当没有 <div v-slot:s3>xxx</div>时,   "我是默认值" 会出现在分发处。

↓ 当这块代码出现的时候，slot的内容是空白（占位符"我是默认值" 被空白所取代)

<Panel>
    <template v-slot:s3></template>
</Panel>

补充： 语法新旧区别
新语法 (使用处)
<div v-slot:header></div>

旧语法 (使用处)
<div slot='s3'></div>

同步更新到自己的语雀
https://www.yuque.com/diracke...