Vue 1-13 插槽slot

示例:  子组件--顶部导航条

　　问题:  当页面需求中,顶部导航条结构相似,但每部分标签又不同.(子组件中,如果标签和样式等固定了,那复用性就会小很多)

　　这时,子组件中, 如果内容是固定的,就无法完成需求

 

解决方法:

　　使用slot插槽

　　　　1. 找到共同点较多的部分:

　　　　　　1. 查看众多导航条中,公共部分最多的部分,可以写死在子组件中

　　　　　　2. 可以通过<slot>大多相同的部分</slot>, 这样,既可以使用该默认的相同部分,也可以通过修改该slot插槽,进行变动,从而完成少部分不不同的更改　　

　　　　　　<slot>  <button>返回按钮<button>  </slot>

　　　　　　<slot>  <input>搜索框部分</input>  </slot>

　　　　　　<slot>  <span>其它</span>  </slot>

 

　　　　2. 不同的部分:

　　　　　　2.不同的部分,不写固定标签和内容,通过slot插槽, 可以传入不同需求的标签或内容<slot></slot>

 

多个插槽使用时,需要给插槽命名:  具名插槽

针对上边的顶部导航条,整体分为左中右三个部分,每个部分的标签可能都会不同,这是需要每部分用一个插槽

　　1. 顶部导航条---子组件中:    <slot  name='插槽名称'></slot>

　　　　<slot  name='left'>可增加默认Dom标签1</slot>

　　　　<slot  name='center'>可增加默认Dom标签2</slot>

　　　　<slot  name='right'>可增加默认Dom标签3</slot>

 

　　2. 使用该子组件的父组件中：

　　　　<子组件标签>

　　　　　　<button  slot="插槽名称">...</button>

　　　　</子组件标签>
　　
　　#  此时，即可使用该button标签来替换子组件中的该插槽名的标签

 

Vue的插槽：（作用域插槽，可以直接在父组件中提取子组件的数据）

　　　　一般插槽： <slot></slot>

　　　　具名插槽： <slot  name='自定义名称'></slot>

　　　　作用域插槽：<slot  : 自定义属性名=“变量”></slot>

　　Vue中，通过作用域插槽，也可以将子组件的数据，绑定到一个自定义的属性中，传递给父组件使用。

　　使用：

　　　　在父组件中，通过声明：slot-scpoe="slot"后， 就可以通过slot.插槽中的自定义的属性名  来使用数据：

　　　　　　<子组件标签名>

　　　　　　　　<template  slot-scpoe="slot">

　　　　　　　　　　<希望插入插槽的标签>slot.插槽中的自定义的属性名</希望插入插槽的标签>

　　　　　　　　</template>

　　　　　　</子组件标签名>