【前端实现】在父组件中调用公共子组件:注意事项&逻辑示例 + 将后端数组数据格式转换为前端对象数组形式 + 增加和删除行

【前端】在父组件中调用公共子组件的实现方法



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


写在最前面

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

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

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

感谢熊老师hh,一下梳理清楚了

这里有两个需要注意的点:

  1. 父组件写数据调用,包括将后端数组数据格式转换为前端对象数组形式
  2. 公共子组件编写公用的方法,例如增加和删除行。
    原因:这样逻辑和细节更简约。就避免了父组件需要监听子组件的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

通过在父组件中定义addRowremoveRow方法,实现增加和删除行的功能:

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

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

三、小结

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

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


hello,我是 是Yu欸。如果你喜欢我的文章,欢迎三连给我鼓励和支持:👍点赞 📁 关注 💬评论,我会给大家带来更多有用有趣的文章。

原文链接 👉 ,⚡️更新更及时。

欢迎大家添加好友交流。

相关推荐
Justinc.4 分钟前
CSS3新增边框属性(五)
前端·css·css3
未来的嗒嘀嗒6 分钟前
Axure是什么软件?全方位解读助力设计入门
ui·photoshop
CXDNW18 分钟前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
使者大牙19 分钟前
【大语言模型学习笔记】第一篇:LLM大规模语言模型介绍
笔记·学习·语言模型
neter.asia20 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫21 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
ssf-yasuo32 分钟前
SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记
论文阅读·笔记·prompt
十一吖i39 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年40 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_41 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习