【前端】在父组件中调用公共子组件的实现方法
- 写在最前面
- 一、调用公共子组件
- 二、实现功能
-
- [1. 将后端数组数据格式转换为前端对象数组形式](#1. 将后端数组数据格式转换为前端对象数组形式)
-
- [2. 增加和删除row](#2. 增加和删除row)
- 三、小结
🌈你好呀!我是 是Yu欸 🌌 2024每日百字篆刻时光,感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅,挖掘无限可能,共同成长!
写在最前面
在前端开发中,尤其是使用框架如Vue.js或React.js时,通常会将一些重复使用的代码抽取为公共组件,以提高代码的可维护性和复用性。
本文将介绍如何在父组件中调用公共子组件,同时实现以下两个功能:
- 将后端数组数据格式转换为前端对象数组形式。
- 增加和删除row。
感谢熊老师hh,一下梳理清楚了
这里有两个需要注意的点:
- 父组件写数据调用,包括将后端数组数据格式转换为前端对象数组形式
- 公共子组件编写公用的方法,例如增加和删除行。
原因:这样逻辑和细节更简约。
就避免了父组件需要监听子组件的update:rowData事件,以便在行被删除时更新父组件的数据。
下面代码为逻辑示例。
一、调用公共子组件
这里我们使用的是Vue.js框架,我们可以创建一个名为CommonRow
的公共子组件,并在父组件中调用它。
子组件CommonRow.vue
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
vue
<template>
<div>
<CommonRow
v-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
方法中将后端返回的数据格式转换为了前端需要的格式。假设后端返回的数据格式为:
json
[
{ "id": 1, "firstName": "John", "years": 30 },
{ "id": 2, "firstName": "Jane", "years": 25 }
]
我们将其转换为前端所需的格式:
javascript
this.rows = backendData.map(item => ({
name: item.firstName,
age: item.years
}));
2. 增加和删除row
通过在父组件中定义addRow
和removeRow
方法,实现增加和删除行的功能:
addRow
方法在rows
数组中添加一个新对象。removeRow
方法通过索引删除数组中的对象。
子组件CommonRow
通过@remove
事件向父组件传递要删除的行的索引,父组件在接收到事件后调用removeRow
方法进行删除操作。
三、小结
通过本文的示例,我们可以看到如何在父组件中调用公共子组件,并实现从后端获取数据、转换数据格式,以及增加和删除行的功能。
这种方法提高了代码的可复用性和可维护性,使我们的前端代码更加简洁和高效。
hello,我是 是Yu欸。如果你喜欢我的文章,欢迎三连给我鼓励和支持:👍点赞 📁 关注 💬评论,我会给大家带来更多有用有趣的文章。
原文链接 👉 ,⚡️更新更及时。
欢迎大家添加好友交流。