组件插槽使用详解

电脑的 usb 口，大家都非常熟悉，保留的 usb 口可以插入鼠标、键盘、U盘、音响、耳机等等，一个插口可以添加多个设备。我们的插槽也是这样，预留一个位置，我们使用的时候可以放入自己需要的内容。

一、插槽的作用

• 插槽的目的是让原来的设备有更多的扩展性。
• 组件最大的特点就是复用性，插槽能大大提高组件的复用性。
• 使用者可以决定组件内部的内容。

二、插槽的基本使用

插槽基本使用就是：抽取共性，保留不同。使用者提供插槽内容。

方式1：基本使用

<div id="app">
 <!-- 调用组件 --> 
 <cld>插槽内容</cld>
</div>

<!-- 组件内容 --> 
<template id="child">
 <div>
  子组件内容
  <slot></slot>  
 </div>
</template>

 

方式2：添加默认值

给插槽内添加默认值，使用组件时，插槽没有填入内容就会展示默认内容，如果使用组件时传入插槽内容，就会展示对应的内容。

<div id="app">
 <!-- 调用组件 --> 
 <cld></cld>
</div>

<!-- 组件内容 --> 
<template id="child">
 <div>
  子组件内容
  <slot>默认内容</slot>  
 </div>
</template>

 

此时页面展示 默认内容。

<div id="app">
 <!-- 调用组件 --> 
 <cld>传入插槽内容</cld>
</div>

<!-- 组件内容 --> 
<template id="child">
 <div>
  子组件内容
  <slot>默认内容</slot>  
 </div>
</template>

 

此时页面展示 传入插槽内容。

方式3：具名插槽

具名插槽就是有具体名字的插槽，基本用法为：

• slot 插槽必须绑定 name 属性。
• 使用组件时，插槽内容需要添加slot属性。
• 通过slot属性来指定，这个slot的值必须和下面的slot组件的name值对应上，如果没有匹配到，则放到匿名的插槽中。

<!-- 组件调用 -->
<div id="app">
 <cld>
  没有插槽内容 
  <h2 slot="title">标题</h2> 
 </cld>
</div>

<!-- 子组件内容 -->
  <template id="child">
 <div>
  <slot name="title"></slot> 
  子组件内容
  <slot>默认内容</slot>  
 </div>
</template>

 

三、作用域插槽

我们经常通过父组件给子组件传递展示内容，但是作用域插槽刚好相反，是父组件替换插槽的标签，但是内容由子组件来提供。

slot-scope 获取插槽作用域，其实就是把组件内的数据带出来。

<!-- 子组件使用  -->
<cld >
 <template slot="title" slot-scope="scope">
  <div  >
   获取数据
   <li v-for="item in scope.data">{{item}}</li>
  </div>
 </template> 
</cld>

<!-- 子组件内容 -->
<template id="child" >
 <div>
  <slot name="title" :data="color"></slot> 
 </div>
</template>
<script>
export default{
 data(){
  return{
    color:['red','oranage','yellow','green']
   }
  }
}
</script>

 

作用：主要用于提供的组件带有一个可从子组件获取数据的可复用的插槽，为了让这个特性成为可能，把需要的数据全部包裹在一个slot元素上，然后通过 slot-scope 特性，把数据从子组件获取出来。

注意：在 vue 的 2.5.0 版本以下，slot-scope 必须绑定在 template 元素上，而更高版本 vue，没有此限制，可以用于任何元素或组件上。