自己写了一个组件，希望能封装成为通用的组件，在父组件使用它时，通过父组件提供的数据源能够渲染对应的数据，从而实现组件复用的效果？

Z时代
2024-02-24
分类：IT

这是写好的子组件：

<template> 
<div class="wrapper center-table">
    <!-- 循环遍历数组中每一项 -->
    <el-row v-for="(item, index) in list" :key="index" class="table-col">
      <el-col v-for="(item2, index2) in item" :key="index2" :span="24 / item.length" class="table-item">
        <span class="label">{{ item2.title }}</span>
        <span class="value">{{ item2.value }}</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        [{ title: '工站', value: 'OP_03' }],
        [{ title: 'SN', value: '11111111' }, { title: 'Time', value: '11:22' }],
        [{ title: 'Result', value: 'OK/NG' }],
        [{ title: 'Name', value: '' }, { title: 'Key', value: '' }]
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  border: solid 1px #eaf2f8;
  height: 40px;
  .table-col:not(:last-child) {
    border-bottom: solid 1px #eaf2f8;
  }
  .table-item:not(:last-child) {
    border-right: solid 1px #eaf2f8;
  }
  .table-col {
    height: 100%;
    display: flex;
  }
  .table-item {
    height: 100%;
    display: flex;
    >div {
      display: flex;
    }
    .label {
      display: flex;
      align-items: center;
      width: 50%;
      // text-align: left;
      background: #f2f9fc;
      color: #666;
      // padding: 8px 12px;
    }
    .value {
      display: flex;
      width: 50%;
      align-items: center;
      word-wrap: break-word;
      color: #222;
      font-size: 14px;
      // padding: 8px 12px;
      flex: 1;
    }
    :deep(.center-table td),
    :deep(.center-table th) {
      text-align: center !important;
    }
  }}

在父组件中引入子组件后，怎样把数据渲染过去并展示出内容

回答：

<template>
  <div>
    <your-component-name :list="parentList"></your-component-name>
  </div>
</template>
<script>
import YourComponentName from './YourComponentName.vue' // 导入你的子组件
export default {
  components: {
    'your-component-name': YourComponentName 
  },
  data() {
    return {
      parentList: [
        [{ title: '工站', value: 'OP_03' }],
        [{ title: 'SN', value: '11111111' }, { title: 'Time', value: '11:22' }],
        [{ title: 'Result', value: 'OK/NG' }],
        [{ title: 'Name', value: '' }, { title: 'Key', value: '' }]
      ]
    }
  }
}
</script>