vue插槽的使用
插槽的功能
- 插槽是为了使设备具有扩展性,而组件中的插槽同样是为了使组件具有扩展性
插槽的使用方式
- 抽取共性,保留不同
- 将共性抽取到组件中,将不同暴露为插槽
- 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容
插槽的基本使用
- 使用特殊标签
<slot></slot>
即可设置一个插槽
<div>
<h2>我是组件</h2>
<h3>我也是组件</h3>
<slot></slot>
- 往组件中插入内容,该内容即就会在插槽中显示
- 如果一次性插入多条内容,这些内容会全部在插槽位置显示
<cpn><button>按钮</button></cpn>
<cpn><input type="text">文本框</cpn>
<cpn>
<h3>哈哈</h3>
<p>嘿嘿</p>
<a href="#">嘻嘻</a>
</cpn>
- 插槽也可以有默认值。当在插槽中没有插入内容时,插槽位置就会显示默认值
<slot><button>默认值</button></slot>
<!-- 未往插槽插入内容时,默认显示一个按钮 -->
<cpn></cpn>
具名插槽
当子组件功能较为复杂时,子组件的插槽可能并非只有一个。如一个导航栏,可能就需要三个插槽,分别表示左边、中间、右边,那么在外面给插槽插入内容时,如何区分插槽是哪一个呢,此时就需要为插槽起一个名字
- 通过为特殊标签slot绑定一个属性name即为命名插槽
<slot name="left"><span>左边</span></slot>
<slot name="middle"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
- 往指定插槽插入内容 ->
slot="插槽的name值"
<cpn><input type="search" slot="middle" />搜索框</cpn>
作用域插槽
- 使用子组件的任何数据,来达到自定义显示内容的目的
- 父组件替换子组件插槽的标签,但是内容由子组件提供使用slot-scope实现,将这个属性绑定到template模板中
<cpn>
<!-- 作用域插槽,使用slot-scope实现,将这个属性绑定到子组件的template中 -->
<template slot-scope='slota'>
<!-- datate即为PLanguages数组,遍历该数组 -->
<span v-for="item in slota.datate">{{item}} /</span>
</template>
</cpn>
<template id="cpn">
<div>
<!-- 将plangues数组动态绑定给datate -->
<slot :datate="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>