---

🌈你好呀！我是 是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

---

写在最前面

在前端开发中，尤其是使用框架如Vue.js或React.js时，通常会将一些重复使用的代码抽取为公共组件，以提高代码的可维护性和复用性。

本文将介绍如何在父组件中调用公共子组件，同时实现以下两个功能：

1. 将后端数组数据格式转换为前端对象数组形式。
2. 增加和删除row。

感谢熊老师hh，一下梳理清楚了
这里有两个需要注意的点：

1. 父组件写数据调用，包括将后端数组数据格式转换为前端对象数组形式
2. 公共子组件编写公用的方法，例如增加和删除行。
   原因：这样逻辑和细节更简约。就避免了父组件需要监听子组件的update:rowData事件，以便在行被删除时更新父组件的数据。

下面代码为逻辑示例。

一、调用公共子组件

这里我们使用的是Vue.js框架，我们可以创建一个名为CommonRow的公共子组件，并在父组件中调用它。

子组件CommonRow.vue

<template><div><button @click="addRow">Add Row</button><div v-for="(row, index) in rows" :key="index" class="row"><input type="text" v-model="row.name" placeholder="Name"><input type="number" v-model="row.age" placeholder="Age"><button @click="removeRow(index)">Remove</button></div></div>
</template><script>
export default {props: {rowData: Array},data() {return {rows: this.rowData};},methods: {addRow() {this.rows.push({ name: '', age: '' });},removeRow(index) {this.rows.splice(index, 1);this.$emit('update:rowData', this.rows);}}
}
</script><style scoped>
.row {display: flex;gap: 10px;margin-bottom: 10px;
}
</style>

父组件ParentComponent.vue

<template><div><CommonRowv-for="(row, index) in rows":key="index":rowData="row":index="index"/></div>
</template><script>
import CommonRow from './CommonRow.vue';export default {components: {CommonRow,},data() {return {rows: []}},methods: {addRow() {this.$refs.commonRowComponent.addRow();},removeRow(index) {this.$refs.commonRowComponent.removeRow(index);},fetchData() {// 假设后端返回的数据格式如下：const backendData = [{ id: 1, firstName: 'John', years: 30 },{ id: 2, firstName: 'Jane', years: 25 },];// 转换为前端需要的格式this.rows = backendData.map(item => ({name: item.firstName,age: item.years}));}},created() {this.fetchData();}
}
</script><style scoped>
button {margin-bottom: 10px;
}
</style>

二、实现功能

1. 将后端数组数据格式转换为前端对象数组形式

在上述示例中，我们在fetchData方法中将后端返回的数据格式转换为了前端需要的格式。假设后端返回的数据格式为：

[{ "id": 1, "firstName": "John", "years": 30 },{ "id": 2, "firstName": "Jane", "years": 25 }
]

我们将其转换为前端所需的格式：

this.rows = backendData.map(item => ({name: item.firstName,age: item.years
}));

2. 增加和删除row

通过在父组件中定义addRow和removeRow方法，实现增加和删除行的功能：

• addRow方法在rows数组中添加一个新对象。
• removeRow方法通过索引删除数组中的对象。

子组件CommonRow通过@remove事件向父组件传递要删除的行的索引，父组件在接收到事件后调用removeRow方法进行删除操作。

三、小结

通过本文的示例，我们可以看到如何在父组件中调用公共子组件，并实现从后端获取数据、转换数据格式，以及增加和删除行的功能。

这种方法提高了代码的可复用性和可维护性，使我们的前端代码更加简洁和高效。

---

hello，我是 是Yu欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 ，⚡️更新更及时。

欢迎大家添加好友交流。