错误:[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)
      }
    }
  },

 

Logo

前往低代码交流专区

更多推荐