我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!
默认插槽
子组件
<div>
<slot></slot>
</div>
父组件
<template>
<div>
<slotvue>
123
</slotvue>
</div>
</template>
<script>
import slotvue from '@/components/slot.vue'
export default{
components:{
slotvue: slotvue
}
}
</script>
具名插槽
子组件
<div>
<slot name="abc"></slot>
</div>
父组件
<template>
<div>
<slotvue>
<template #abc>
<div>123</div>
</template>
</slotvue>
</div>
</template>
<script>
import slotvue from '@/components/slot.vue'
export default{
components:{
slotvue: slotvue
}
}
</script>
作用域插槽 (插槽中定义的数据父组件中不能直接使用,需要使用自定义属性传过去,v-slot:default的default是插槽的名字,fff是个对象 fff.data的data是自定义属性的名字)
子组件
<div>
<slot :data='a'></slot>
</div>
<script>
export default{
data(){
return {
a:123
}
}
}
</script>
父组件
<template>
<div>
<slotvue>
<template v-slot:default="fff">
<div>{{fff.data}}</div>
</template>
</slotvue>
</div>
</template>
<script>
import slotvue from '@/components/slot.vue'
export default{
components:{
slotvue: slotvue
}
}
</script>