Vue组件插槽篇

1. 概述

1. 组件的插槽是为了让咱们封装的组件更具扩展性
2. 让使用者能够决定组件内部的一些内容到底展现什么

2. 插槽的基本使用

1. 在子组件的模板中，使用特殊的元素 slot 就能够为子组件开启一个插槽

<slot>这里能够给默认值<slot>
     //注：当使用者没有替换插槽的状况下，就使用默认值，没给默认值，就为空

2. 当时用的时候，往子组件标签中，添加元素就会替换插槽

<cnp>
     	<button>按钮</button>
     </cnp>
     //注：若是有多个值，同时放入到组件中进行替换时，一块儿做为替换元素 

3. 具名插槽的使用

1. 若是有多个插槽的状况下，在替换的时候，为了一一对应，因此给插槽命名，能够精确对应
2. 命名方式就是给每一个插槽一个 name 属性，取不同的值

<slot name='left'></slot>
         <slot name='center'></slot>
         <slot name='right'></slot>

3. 在使用的时候,在插入的元素中定义 slot 属性，把插槽 name 的值给它：

<cnp>
              <button slot='left'>按钮</button>
              <button slot='center'>按钮</button>
              <button slot='right'>按钮</button>
         </cnp>

4. 做用域插槽

1. 父组件替换插槽的标签，可是内容由子组件来提供
2. 那么父组件怎么样获取子组件的内容呢
3. 在子组件的插槽slot标签中绑定一个属性,属性名自定义

<slot :data="子组件的数据"></slot>

4. 在父组件调用子组件标签的时候，调用一个标签，标签里的属性为 slot-scope="slot"
   之前标签只能用template，如今不限制了

<cnp>
              <template slot-scope="slot">
                   slot.data  //就能获取子组件的数据了
              </temolate>
      </cnp>
      // template 之前必须用这个标签，如今不限制了