组件系列：元素加上表第2部分-DEV365 开发者社区

介绍

在本文中，我们将重点关注以前的文章组件系列中的表组件：元素加上表第1部分。
我们将专注于使用VUE来支持我们实现可重复使用的表组件的几个领域。可重复使用的组件是界面的一部分，这些界面可能会在项目的各个位置用于不熟悉该术语的人。此外，我们将在Vue中解决这些区域，以使我们的桌子可重复使用：

道具
循环

道具

什么是道具？
道具是属性的缩写。这是一种将数据从一个组件传输到另一个组件的方法。
使用道具，首先我们需要从VUE导入defineProps。
示例：

import { defineProps } from "vue";

const props = defineProps({
  testProps: String
});

让我们开始在我们的文件目录src/components/TableComponent.vue中声明道具（将此代码添加到脚本标签中，然后将tabledata删除给父母）。

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  tableData: any;
}>();
</script>

在src/components/TableComponent.vue中的脚本标签中应该拥有什么。
根据Prop的描述，这是一种将数据从一个组件传输到另一个组件的方法，我们将可重复使用的组件将其可重复使用的组件导入其预期用途的位置，即SRC/App.Vue。

<template>
  <TableComponent :table-data="tableData" /> 
// as for pass props here we are using ':' 
// because we wanted to be dynamic props when we are passing on
</template>

<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
</script>

这是输出的样子。

环形

在编程中，循环是一个重复动作直到所有周期完成的概念。
为什么这么重要？想象一下您想在1到100之间打印出一个数字。如果您要编写硬码，您会通过一次将数字从一行中写下来做到这一点1到100。如果我们希望计算机为我们做，则循环是必经之路。为什么这与前端现实世界问题有关？假设我们想贯穿组织中的员工列表。由于我们不确定员工列表的长度，因此我们可能会考虑编写一个循环来打印整个员工列表。有关循环的更多信息，请搜索网络。尽管该概念用于多种编程语言，但其中大多数都共享相同的for and while循环。因此，在这种情况下，我将使用VUE构建循环。在<template>/template>中使用vue循环的语法看起来像。

<template>
  <li v-for="item in items">
    {{ item }}
  </li>
</template>

<script setup>
const items = ['Apple', 'Banana', 'WaterMelon'];
</script>

有关使用元素加上表格并使用插槽的提示

由于我们正在将道具传递给表组件，因此现在是静态的。至于实际实现组件的组件，它使用您提供的对象作为for循环的键。想象一下，如果道具需要age密钥和对tableData的价值，我们的表将不会自动更新。
更新src/App.vue。

<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    age: 10,
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    age: 10,
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    age: 10,
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    age: 10,
  },
];
</script>

，但是正如您可能已经注意到的那样，服务器的UI不会添加现场年龄。诀窍是，我们将使用新的keys/values适应我们的表组件，并自动更新表显示。 这还包括该代码库中的VUE的插槽概念，我将在下面解释。

<template>
  <el-table :data="tableData" style="width: 100%">
    <template v-for="value in headerTable" :key="value.name">
      <el-table-column :prop="value" :label="value" width="180" />
    </template>
  </el-table>
</template>

<script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue';

const props = defineProps<{
  tableData: any;
}>();

const headerTable = ref();

onMounted(() => {
  headerTable.value = Object.keys(props.tableData[0]);
});
</script>

作为所示代码，我们将对象的键收集到一个数组，然后将其循环在VUE的模板插槽中（如所示，我选择了对象数组的索引0，并假设所有对象都具有相同的数量keys/values。如您所见，一旦您对父母进行更改，表UI现在将自动刷新。

插槽是在称为组件时离开空间填充空间的想法。例如，如果您打算在剧院看电影，毫无疑问，您将保留席位。当时间到来时，您将坐在您保留的座位上，一旦表演结束，其他人也可以做同样的事情。因此，想法是制作一个空盒子，然后等待将某些东西放在其中。

结论

在本文中，我们正在讨论如何使用VUE和使用可重复使用的组件。同样，正如代码所证明的那样，出现了新的术语，例如onMouted，它指的是VUE的生命周期，而ref则指的是反应性对象。我想创建另一个系列，讨论使用这些新术语的VUE深度。在下一篇文章中，我将重点关注该表组件的样式，并专注于Vue中的条件渲染。这是本文的代码Git。

快乐编码~~~