uniapp中插槽的使用
跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。父组件:必须在 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。:需要多个插槽时,可以利用元素的一个特殊的特性:name 来定义具名插槽。
·
首先,简单使用
子组件
<template>
<view class="">
<slot>发布</slot>
</view>
</template>
父组件
<template>
<view class="release" :style="{'margin-top':statusBarHeight+'rpx'}">
<Queation>111</Queation>
<!-- 如果子组件标签内什么都不写,则会显示默认的“发布”两个字-->
</view>
</template>
<script>
import Queation from '@/components/common/question.vue'
export default {
data() {
return {
}
},
components:{
Queation
},
}
</script>
结果:
具名插槽:需要多个插槽时,可以利用 元素的一个特殊的特性:name 来定义具名插槽
子组件
<template>
<view>
<slot name="button">发布</slot>
<br/>
<slot name="content"></slot>
</view>
</template>
父组件:必须在 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称
<template>
<view >
<Queation>
<template v-slot:button>
这是name为button的插槽
</template>
<template v-slot:content>
这是name为content的插槽
</template>
</Queation>
</view>
</template>
<script>
import Queation from '@/components/common/question.vue'
export default {
data() {
return {
}
},
components:{
Queation
},
}
</script>
结果:
具名插槽的缩写: 跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header :
<template>
<view>
<Queation>
<template #button>
这是name为button的插槽
</template>
<template #content>
这是name为content的插槽
</template>
</Queation>
</view>
</template>
更多推荐
已为社区贡献7条内容
所有评论(0)