[Vue warn]: Avoid mutating a prop directly...-蒲公英云

[Vue warn]: Avoid mutating a prop directly...

[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.

中文：[Vue 警告⚠️]：避免直接更改属性，因为父组件重新呈现时将覆盖该值相反，使用基于属性值的数据或计算属性。

我百度了很多的解决问题的帖子，都是直接贴出来英文的，翻译一下会死啊，真的是，很多的问题我们都不是说不知道怎么解决，其实是我们压根没看懂描述的是什么意思，就像这个，看明白描述基本就知道怎么修改了。我们在接收一个值之前需要使用一个当前页面下面的data里面定义的变量接收，这样可以避免直接更改这个值。
我们写个例子：

<template>
  <div class="back" v-on:click="back">
    <img src=".././common/imgs/fanhui.png" alt="">
    <span>返回</span><span>{ { '剩余'+overwrite_seconds_timeout+'秒'}}</span>
  </div>
</template>
<script>
  export default { 
    name: "return",
    data() { 
      return { 
        time: '',
        overwrite_seconds_timeout: this.seconds_timeout
      }
    },
    props: { 
      seconds_timeout: 0
    },
    /** * @created 页面加载的时候进行页面自减函数的间隔执行操作 */
    created: function () { 
      let that = this;
      that.time = setInterval(that.remain_sec, 1000)
    },
    methods: { 
      /** * @remain_sec 进行秒数自减的操作 */
      remain_sec() { 
        let that = this;
        if (that.overwrite_seconds_timeout === 1) { 
          that.$router.push({ path: '/'});
        } else { 
          that.overwrite_seconds_timeout--;
        }
      },
      /** * 这里是返回，直接调用自定义组件的返回，自定义逻辑 */
      back() { 
        if (this.back) { 
          this.$emit("comBack")
        }
      }
    },
    /** * @beforeDestroy 页面销毁前，将Interval清除 */
    destroyed: function () { 
      let that = this;
      clearInterval(that.time);
    }
  }
</script>
<style lang="less" scoped>
  .back { 
    float: left;
    img { 
      width: 43px;
      height: 34px;
      margin-left: 40px;
      float: left;
    }
    span { 
      height: 25px;
      font-size: 26px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      float: left;
      margin-left: 8px;
    }
  }

这是一个组件，倒计时就返回的组件，常用的场景是一个页面进来以后我们提示用户还有多少秒就会返回上一个界面，很常见的一个组件，那么这里就有一个需要接收父组件的值seconds_timeout，这个值我们在页面是怎么使用的呢？

在main.js里面将组件引入：

//将返回的组件引入
import back from “./components/back”

Vue.component(“back-view”,back)

我们引用的时候直接将需要的值给，也就是120秒以后会返回，那么这个时候我们如果直接在组件中接收seconds_timeout，会直接警告，就是我们今天的问题，怎么解决呢？上面的例子在data里面定义了一个新的值就是为了解决这个问题。

衍生知识
我们在写组件的时候，其实很多的时候我们是直接在组件中将一个功能直接实现的，其实我们大部分的组件都是可以自定义的，而不是一个固定死的一段代码。怎么说呢？就像我们这个组件，如果我们直接写成60秒以后返回是不是可以的，当然是可以的，直接使用data定义一个60秒的倒计时，但是有一个问题就是很多的场景其实是根据实际情况来的，具体需要的时间或者说秒数是根据场景来的。那么这个时候需要我们在定义一个组件的时候可以灵活一点，比如我们写的这个页面是120秒。还有一个就是我们说的函数，这个返回的组件可以做的事情其实是很多的，返回的哪一个页面，很多人说肯定是上一个界面啊，很多的时候是不会直接到上一个界面的，所以我们需要自定义到哪一个页面，那么这个时候我们需要的是根据自己需要返回或者返回的时候需要清理一下什么操作，那么我们直接这样写就可以。

/* 这里是返回，直接调用自定义组件的返回，自定义逻辑 */
```
  back() { 
    if (this.back) { 
      this.$emit("comBack")
    }
  }
```

使用方式：

//这里写自己需要的一些处理逻辑
comBack() {
        this.$router.go(-1);
      }

到这里一个组件的基本使用就可以了，有些人会问为什么标题不写成组件的基本使用而是一个问题呢？其实我们自己在写代码的时候会发现很多时候我们学习一个东西不是因为我们想学习，而是我们遇到了一个问题，不好解决的时候，我们会找到一些解决的方案，这个解决的问题的过程其实就是一种学习的过程，所以我习惯性的根据一个问题来引申出来一些存在的知识点，这样做的好处是第一我们可以直接看到活生生的例子，第二是我们可以直接看到解决的思路，对我们解决的别的问题其实也是很有帮助的，最后就是一般有例子的时候才更有说服力，不然空谈一些什么东西是没有任何意义的。喜欢的可以关注一下，一起交流学习进步。