vue中子组件修改父组件中的数据产生的问题（vue组件中数据流的单向性）

最新推荐文章于 2023-06-07 21:04:31 发布

yangwenguangywg

最新推荐文章于 2023-06-07 21:04:31 发布

阅读量533

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_55905001/article/details/124774368

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

在Vue中，当需要从子组件触发父组件数据的修改，如删除任务，需要遵循单向数据流原则。具体做法是子组件通过$emit触发自定义事件，父组件监听该事件并执行相应操作。例如，子组件在删除按钮上绑定点击事件，通过$emit('onDelete')通知父组件；父组件通过v-on:@onDelete='delItem'监听并调用删除方法，更新任务数组。这样可以避免直接修改父组件数据导致的错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

当你的父组件中包含一个子组件，你需要通过子组件修改父组件中的数据的时候，应该怎么做，这么说有点抽象，举个具体的例子：当你有一个记事本，父组件中有一个数组数据，里面装着的是你今天需要完成的任务，然后子组件就是每个任务，父组件通过数组使用v-for循环出所有任务，然后你点击子组件中的删除部分，就可以删除父组件中数组的元素，进而删除一个任务，那么你该如何做呢？

例图
在这里插入图片描述

思路

我带你走一遍思路：

1.首先，你要做的第一步，就是在子组件里面的删除节点添加点击事件，点击后实现该整行组件的删除
2. 如何删除整行数据呢？根据vue的特性，数据驱动页面，我们是不是只需要将父组件里面的任务数组里对应的元素删掉，页面就会自动刷新，这个任务就没了，那么就直接将父组件中的数组传给子组件，子组件使用props接受，然后你在点击事件里面修改删除数组元素即可
3. 但是如果你这么做了，就会出问题，发现会报错，why？这就是这篇博客主要的目的，引出问题：子组件无法修改父组件中的数据，这就是组件中数据流的单向性：父级向子级传递的数据，父级更改，子级也会更改，但是子级不能更改，会报错
4. 那么如何解决呢？我们就需要破坏数据流的单向性，使用vue官方提供的方法，自定义事件：在子组件的点击事件上调用相关方法，使用$emit()自定义事件发射给父级，然后监控这个自定义事件，父级就可以执行这个事件，调用相关的方法了。

例子
子组件中代码

// template中
<i class="iconfont icon-delete" @click="onDelete" />
......
// js中
methods:{
    onDelete(){
      this.$emit("onDelete")
    }
  }

父组件中代码

// template中
<TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" @onDelete="delItem(index)"/>
......
// js中
methods:{
    delItem(index: number) {
      this.todos.splice(index, 1);
      this.dump();
    }
  }