关于vue.js: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> ) 中须要应用插槽的标签上加上slot属性。
slot属性所在的标签能够是<div> <template> 等，这个标签用什么没有要求。
slot属性的值，要和散发处<slot>标签的name属性对应的值雷同 (“s1”, “s2”, “s3”)，这里是散发处的标识，让vue晓得上面的内容要搁置在哪个散发处的地位。

<div id="app">
    <Panel>
        <div slot='s1'>题目</div>
        <template slot='s2'>Yoo,内容</template>
        <p slot='s3'>期待更多</p>
    </Panel>
</div>

↑ 注： 

1. 写两个 slot=’s1′ 
   如 <div slot=’s1′>嘿嘿</div>  <div slot=’s1′>哈哈</div>
   那么这两个内容会同时呈现在name=’s1’的solt内容中。
2. 应用处的slot属性，搁置在不同的标签上，
   如 <div slot=’s1′>题目</div>
   换成<span slot=’s1′>题目</span>
   没有问题，文本格式上可能有肯定区别，能够通过css来进行调整。

3. 设置默认值（<slot name=’s3′>我是默认值</slot> ），起到占位符的成果

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

   下面这块代码块的成果就是用”我是默认值”当做占位符。
   当没有 <div slot=’s3′>xxx</div>时,   “我是默认值” 会呈现在散发处。

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

<Panel>
    <div slot='s3'></div>
</Panel>

同步更新到本人的语雀
https://www.yuque.com/diracke…