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

Question

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

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

Answer 1

在封装的组件中，可以通过 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` 数据。