uniapp 插槽slot

  1. 默认插槽

<template>
    <view class="view ">
        <view v-if="title" class="solid-bottom title">
            <text class="cuIcon-titles text-green"></text>
            <text>{{title}}</text>
        </view> 
        <!-- 默认插槽 -->   
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name:"cart",
        props:{
            title:{
                type: String,
                default: ''
            },
        },
    }
</script>

<style scoped>
    .view{
        background-color: white;
        margin: 20upx; 
        padding: 20upx;
    }
    .view_margin_bottom{
        margin-bottom: 10upx;
    }
    .title{
        margin-bottom: 10upx;
        padding-bottom: 10upx;
    }
</style>

引入组件cart

<template>
    <view>
        <cart title="标题">
            <!-- 默认插槽 -->
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        <!-- <template v-slot:text>
                <ol>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ol>
            </template> -->
        </cart>
    </view>
</template>
<script>
    import cart from '@/components/cart/card.vue'  
    export default {
        components: {
            cart
        },
    }
</script>
  1. 具名插槽(方便使用多个插槽)

在插槽加上name<slot name="xxx"></slot>,引用组件时使用某个插槽加上slot="xxx"或用<template>包裹v-slot:text,

例如:<view slot="xxx"></view> 或 <template v-slot:text><template/>

<template>
    <view class="view ">
        <view v-if="title" class="solid-bottom title">
            <text class="cuIcon-titles text-green"></text>
            <text>{{title}}</text>
        </view> 
       <!-- 具名插槽 -->
        <view style="color: red;">
            <slot name="text" ></slot>
        </view>
    </view>
</template>

引用组件

<template>
    <view >
       <cart title="标题">
            <!-- 默认插槽 -->
            <ol slot="text">
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ol>
       <!-- <template v-slot:text>
                <ol>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ol>
            </template> -->
        </cart>
    </view>
</template>

### UniApp Slot 传参方法 在 UniApp 中,`slot` 是一种强大的工具,允许开发者将父组件中的内容注入到子组件的特定位置。这种机制不仅限于静态内容传递,还可以通过作用域插槽(Scoped Slots)实现数据绑定和事件处理。 #### 使用默认插槽进行简单内容传递 当不需要额外的数据交互时,默认插槽提供了最简单的解决方案。只需在子组件内定义 `<slot></slot>` 占位符,在调用处即可插入任意 HTML 或者自定义组件作为其内容[^2]。 ```html <!-- 子组件 childComponent.vue --> <template> <div class="child"> <p>这里是子组件</p> <!-- 定义一个默认插槽 --> <slot></slot> </div> </template> <script setup lang="ts"></script> <style scoped> .child { border: 1px solid black; } </style> ``` ```html <!-- 父组件 parentComponent.vue --> <template> <ChildComponent> <span>这是来自父级的消息。</span> </ChildComponent> </template> <script setup lang="ts"> import ChildComponent from './childComponent.vue'; </script> ``` #### 利用具名插槽增强灵活性 对于更复杂的场景,则可以通过命名多个 `slot` 来区分不同区域的内容填充。这使得布局更加灵活可控,并且能够更好地适应各种界面需求。 ```html <!-- 子组件 namedSlotExample.vue --> <template> <article> <header><slot name="title">默认标题</slot></header> <section><slot>主体内容</slot></section> <footer><slot name="footer">页脚信息</slot></footer> </article> </template> ``` ```html <!-- 父组件 usingNamedSlots.vue --> <template> <NamedSlotExample> <template v-slot:title> 自定义的文章标题 </template> 这里是文章的主要部分 <template #footer> 版权声明和其他附加说明 </template> </NamedSlotExample> </template> <script setup lang="ts"> import NamedSlotExample from './namedSlotExample.vue'; </script> ``` #### 实现带参数的作用域插槽 如果希望进一步加强父子组件之间的互动,那么可以采用带有作用域的对象形式来向父组件暴露某些属性或函数给它使用。这种方式特别适用于列表渲染等场合下,让每一项都能获取到对应的数据源[^4]。 ```html <!-- 子组件 listItem.vue --> <template> <ul> <li v-for="(item, index) in items" :key="index"> <slot :data="item">{{ item.text }}</slot> </li> </ul> </template> <script setup lang="ts"> const props = defineProps({ items: Array, }); </script> ``` ```html <!-- 父组件 listContainer.vue --> <template> <ListItem :items="messageList"> <template v-slot="{ data }"> {{ `${data.id}: ${data.content}` }} </template> </ListItem> </template> <script setup lang="ts"> import ListItem from './listItem.vue'; const messageList = [ { id: 'msg_001', content: '第一条消息' }, { id: 'msg_002', content: '第二条消息' } ]; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值