【Vue】错误：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever ...

错误：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "introductionList"

问题分析：

父组件通过props传值给子组件，子组件改变props的属性值导致；

父子组件中的数据流是单向的，父子 prop 之间形成了一个单向绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（父组件更新，子组件中的prop值也会更新，但子组件不能修改由父组件传递过来的值）；

当props是对象的时候，子组件直接修改数据，不会引起警告，但最好不要这样操作；

子组件中更改绑定的prop值最好使用计算属性computed解决。

解决方式：

父组件：

<IntroduceVideoEditDiv
              :introduction-list="introductionList"
              @on-change-introduction="onChangeIntroduction"></IntroduceVideoEditDiv>

data () {
    return {
      // 介绍list
      introductionList: []
  },
methods: {
    // 数据的改变在父组件中修改
    onChangeIntroduction (val) {
      this.introductionList = val
    },
}

子组件：定义一个计算属性，处理props的值并返回

<template v-for="(item, index) in introductionList_">
            <div :key="index">
                ...
             </div>
          </template>

props: {
    introductionList: {
      type: Array
    }
  },
computed: {
    // 子组件中更改绑定的prop值最好使用计算属性computed解决
    introductionList_: {
      get () {
        return this.introductionList
      },
      // 将绑定的introductionList改为绑定计算属性值introductionList_，此时的set方法不能写             
      // this.introductionList = val,这样和直接绑定prop中的introductionList是没什么区别的所
      // 以，最好要将此时的introductionList_改变交给父组件控制，通过父组件来改变prop的
      // introductionList值。
      set (val) {
        // introductionList_改变由父组件控制
        this.$emit('on-change-introduction', val)
      }
    }
  },