slot即“插槽”,插槽会在子组件需要的位置插入需要的内容,插槽的显示和内容等均由父组件控制。slot非常实用,它使vue中父子组件代码更加灵活,在很多使用场景下都能发挥不错的效果。
使用方法
默认使用
先看示例:
这是子组件
<template id="son">
<div>
<h2>我是儿子</h2>
<slot></slot>
</div>
</template>
这是父组件
<div id="app">
<h1>我是爸爸</h1>
<son>
<p>插槽</p>
</son>
</div>
最后的显示效果为:
插槽可以理解为提前在子组件中挖个坑,然后通过父组件对填入坑的内容物进行相关配置与控制,使其显示我们需要的结果。
具名插槽
顾名思义,具名插槽即有名字的slot,具名插槽让子组件可以高度定制化,它使得可以在子组件中加入多个slot并且能够重复调用。
还是看示例:
这是子组件
<template id="son">
<div>
<h2>我是儿子</h2>
<slot name="a"></slot>
<slot name="b"></slot>
<slot name="a"></slot>
</div>
</template>
<div id="app">
<h1>我是爸爸</h1>
<son>
<p slot="a">a</p>
<p slot="b">b</p>
</son>
</div>
运行结果是这样:
插槽依据名字填入内容物,使用起来非常方便灵活:
作用域插槽
作用域插槽可以在插槽上携带数据,看示例比较好理解:
这是子组件
<template id="son">
<div>
<h2>我是儿子</h2>
<slot :data="num"></slot>
</div>
</template>
子组件中有一些数据
let son = {
template: "#son",
props: {
fatherstr: {
type: Number
}
},
data() {
return {
num: [1, 2, 3]
}
},
}
这是父组件
<div id="app">
<h1>我是爸爸</h1>
<son>
<div slot-scope="num">
<div v-for="i in num.data">
{{i}}
</div>
</div>
</son>
</div>
运行效果这样:
结束
本文是学习过程中的小小总结,希望有所帮助。