vue将表格组件封装后如何传值

在Vue中，将表格组件封装后需要传值时，可以通过props来进行传递。props是父组件向子组件传递数据的方式，我们可以定义一个props对象来接收父组件传递过来的值，然后在子组件中使用这个值。

例如，我们在父组件中定义了一个表格组件，并且需要向表格组件传递一个数据列表，可以这样写：

<template>
  <div>
    <my-table :dataList="list"></my-table>
  </div>
</template>

<script>
import MyTable from './MyTable.vue'

export default {
  components: {
    'my-table': MyTable
  },
  data () {
    return {
      list: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ]
    }
  }
}
</script>

在子组件中，我们需要定义props对象来接收父组件传递过来的值，并且在组件中使用这个值。例如，我们在子组件中定义了一个表格组件，可以这样写：

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in dataList" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      required: true
    }
  }
}
</script>

在子组件的props对象中，我们定义了一个dataList属性，它的类型为Array，表示需要传递一个数组类型的值。required属性表示这个属性是必须要传递的，如果没有传递，会抛出一个警告。

在子组件的模板中，我们通过v-for循环遍历dataList数组，渲染出表格中的每一行数据。这样，就可以将父组件传递过来的值用于子组件中的渲染。