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

背景

当你的父组件中包含一个子组件，你需要通过子组件修改父组件中的数据的时候，应该怎么做，这么说有点抽象，举个具体的例子：当你有一个记事本，父组件中有一个数组数据，里面装着的是你今天需要完成的任务，然后子组件就是每个任务，父组件通过数组使用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();
    }
  }