啥都想学·啥也不会 2023-04-15 23:09 采纳率: 52.9%
浏览 58
已结题

vue中怎么封装插槽中的代码?

有个重复使用的代码片段想要封装成组件,写完之后试着写了一个div验证了一下是可以在页面上显示的,所以引入没有问题,
封装的这段代码是写在vxe-table-column里面的


```html
 <vxe-table>
            <vxe-table-column>
                <template #default={'row'}>
                    <div class='组件'>
                        组件内容,其中有引用关于row.xxx的数据
                    
</template> </vxe-table-column> </vxe-table>

div中就是重复的代码,想要写成组件方便重复使用,但是这样<template #default={'row'}>中的row会报错,请问该怎么解决这个问题呢?

  • 写回答

2条回答 默认 最新

  • 桃宝护卫队 2023-04-16 02:21
    关注

    在封装的组件中,可以通过 props 属性接收传递给组件的数据,其中也可以包含需要引用的 row 数据。

    例如,在组件中添加一个 props 属性 rowData,并在组件内部使用 rowData 来引用需要的数据,示例代码如下:

    <!-- 自定义组件 -->
    <template>
      <div class='组件'>
        组件内容,其中有引用关于rowData.xxx的数据
      </div>
    </template>
    
    <script>
    export default {
      props: {
        rowData: Object // 传递的 row 数据
      }
    }
    </script>
    

    在使用该组件时,可以将需要引用的 row 数据通过 rowData 属性传递给组件,如下所示:

    <vxe-table>
      <vxe-table-column>
        <template #default="{ row }">
          <!-- 使用自定义组件,将 row 数据传递给组件 -->
          <my-component :row-data="row"></my-component>
        </template>
      </vxe-table-column>
    </vxe-table>
    

    这样,在组件中就可以通过 props 属性中定义的 rowData 引用到需要的 row 数据,而不需要在 中直接引用row` 数据。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月25日
  • 已采纳回答 4月17日
  • 创建了问题 4月15日

悬赏问题

  • ¥60 Qcustomplot绘制实时动态曲线
  • ¥20 运用matlab画x-y图
  • ¥15 用idea运行项目,运行tomcat报错:断言失败
  • ¥15 Sqlserver查询链接服务器数据问题
  • ¥15 Bibtex4Word 引用中文文献
  • ¥20 用opencv c/c++ 转换成灰度图,然后做一下直方图均衡,输出mp4文件
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题