Vue :slot 使用

Vue :slot 使用

官方描述

	在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
	它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

Slot

	- 父组件：
		<navigation-link url="/profile">
		    <p>分发的内容</p>
            <p>更多...</p>
		</navigation-link>
		
	- solt组件(navigation-link);
		   <a
			  v-bind:href="url"
			  class="nav-link"
			>
		 	 <slot>
		 	 	<!-- 替换内容部分 -->
		 	 	<p>父组件没有任何插入内容,此内容将作为默认显示</p>
		 	 </slot>
		</a>
		
		- 渲染结果
		<div id="app">
		     <div>
		        <p>分发的内容</p>
            	<p>更多...</p>
		    </div>
		</div>

具名 Slot

	-  给 <slot> 元素指定一个 name 后可以分发多个内容
	-  具名 Slot 可以与单个 Slot 共存
	-  一个不带 name 的 <slot> 出口会带有隐含的名字“default”
	-  2.6.6 新增缩写，v-slot: 替换为字符 #
		eg:  v-slot:header 可以被重写为 #header
	
	-  父组件
	 <child-component>
            <h2 slot="header">标题</h2>
            
            <p>正文内容</p>
            <p>更多正文内容</p>
            
            <div slot="footer">底部信息</div>
      </child-component>
	
	-  solt组件
		<div class="footer">
                <div class="header">
                    <slot name="header"></slot>
                </div>
                
                <div class="main">
                    <slot></slot>
                </div>
                
                <div class="footer">
                    <slot name="footer"></slot>
                </div>
         </div>

-  渲染结果
	 <div class="container">
          <div class="header">
               <h2>标题</h2>
           </div>
           
           <div class="main">
               <p>正文内容</p>
               <p>更多的正文内容</p>
           </div>
           
           <div class="footer">
               <div>底部信息</div>
           </div>
       </div>

动态 solt

	-  2.6.0 新增
	-  动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

		<base-layout>
		  <template v-slot:[dynamicSlotName]>
		    ...
		  </template>
		</base-layout>

参考：
- https://vuejs.org/v2/guide/components-slots.html
- https://www.jianshu.com/p/559332a9c123