uni-app 中给 slot 传递参数的一种方法

本文介绍在uni-app中使用自定义Modal组件时如何从父组件传递数据到slot中,并提供了一种可行的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用 uni-app 自定义组件时遇到了一个问题,我引用了DCloud_UNI_Neil 的“自定义 Modal 组件”(https://ext.dcloud.net.cn/plugin?id=134#rating),在此首先对作者表示感谢!

    在使用时,若 slot 中要使用父组件本身的数据时是没有办法,其它带slot 的组件也是一样的。琢磨了一下,明白了 vue slot 的原理:父组件调用子组件,再由子组件调用 slot 中内容渲染。所以,虽然 slot 中内容位于父组件中,但却不能直接使用父组件中的成员。于是想到了一个解决办法。
1. 将作者的组件(neil-model.vue)中做如下修改:(对不起,如有侵权,我马上删除)
    1)在props中加入 item(可以是其它名字,现假定为item)
             props:{
                ..., //其它属性
               item:{type:Object, default:{}} //可以在 slot 中引用的。
            }
     2) 在 <slot 中添加一个属性,名字也要和props中定义的一样(这样,调用者才好引用),如下:
          <template v-else><slot :item="item"></slot></template>
2. 在父组件中将要在 slot 中使用数据对象传递给 neil-modal,通过以上修改后,父组件在slot中就可以引用 item了。例子如下:
    <neil-modal    :show="show" :item="myData" ....>
          {{item.prop1}}  <!-- 这时不能再用 myData了,要用上面设置的属性名(红色部分保持一致) -->
          {{item.prop2}}
   </neil-modal>

 

### uni-appuni-table组件的点击事件使用方法 在 `uni-app` 的开发过程中,`uni-table` 是一个非常实用的表格展示工具。为了增强用户体验,通常需要为表格中的每一行添加点击事件以便执行特定的操作。以下是基于已有引用内容和专业知识总结的两种实现方式。 #### 方法一:通过自定义插槽绑定点击事件 此方法无需修改原生 `tr` 组件结构,而是利用 `uni-table` 提供的自定义单元格功能来绑定点击事件[^3]。 ```html <template> <view> <!-- 表格 --> <uni-table border stripe emptyText="暂无数据"> <uni-tr> <uni-th>列名1</uni-th> <uni-th>列名2</uni-th> </uni-tr> <block v-for="(item, index) in tableData" :key="index"> <uni-tr @click="rowClick(item)"> <uni-td>{{ item.col1 }}</uni-td> <uni-td>{{ item.col2 }}</uni-td> </uni-tr> </block> </uni-table> <!-- 分页 --> <view class="pagination-wrap"> <uni-pagination show-icon :page-size="pageSize" :current="currentPage" :total="total" @change="onPageChange"/> </view> </view> </template> <script> export default { data() { return { pageSize: 10, currentPage: 1, total: 50, tableData: [ { col1: '数据1', col2: '数据A' }, { col1: '数据2', col2: '数据B' } ] }; }, methods: { rowClick(rowItem) { console.log('点击了某一行:', rowItem); // 可在此处触发导航或其他逻辑操作 }, onPageChange(e) { this.currentPage = e.current; console.log('分页切换到第几页:', e.current); // 加载对应的数据 } } }; </script> <style scoped> .pagination-wrap { margin-top: 20px; } </style> ``` 上述代码展示了如何通过 `@click` 监听器为每行绑定点击事件,并传递当前行的数据作为参数--- #### 方法二:重写 `tr` 组件并扩展其行为 如果希望更灵活地控制行的行为,则可以考虑重新封装 `tr` 组件,在内部实现更多定制化逻辑。 以下是一个简单的例子: ```javascript // 自定义 tr.js 文件 import Vue from 'vue'; const CustomTr = Vue.extend({ name: 'CustomTr', props: ['rowData'], template: ` <uni-tr @click.native="handleRowClick"> <slot></slot> </uni-tr> `, methods: { handleRowClick() { this.$emit('custom-row-click', this.rowData); // 将数据回传给父级 } } }); export default CustomTr; ``` 接着可以在模板中引入该组件替代默认的 `<uni-tr>` 标签: ```html <template> <view> <uni-table border stripe emptyText="暂无数据"> <custom-tr v-for="(item, index) in tableData" :key="index" :rowData="item" @custom-row-click="rowClicked"> <uni-td>{{ item.col1 }}</uni-td> <uni-td>{{ item.col2 }}</uni-td> </custom-tr> </uni-table> </view> </template> <script> import CustomTr from './path/to/CustomTr'; export default { components: { CustomTr }, data() { return { tableData: [{ col1: '测试1', col2: '值A' }, { col1: '测试2', col2: '值B' }] }; }, methods: { rowClicked(data) { console.log('子组件触发的点击事件:', data); } } }; </script> ``` 这种方法允许开发者完全掌控行级别的交互细节。 --- ### 总结 以上分别介绍了直接绑定点击事件与重构 `tr` 组件这两种不同的解决方案。前者简单易用适合大多数场景;后者则提供了更高的自由度,适用于复杂业务需求下的项目开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值