[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent

[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: “app”

[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: "app"

这样的错误是我在昨天遇到的,今天反过来再看一遍官方文档,看到了解释。官方文档中文截图如下:在这里插入图片描述
英文截图如下:在这里插入图片描述

又有点新东西

今天再次遇到了这个问题,根据官方文档的翻译,我们可以理解为props中的属性最好避免改动,已经提醒你了,出错了算你自己的
如果我们一定要改动这些值,我们可以在data中重新定义相应的属性来接收props中的属性。例:

<template>
  <div>
    <span>子组件</span>
    <input type="text" name="" v-model.trim="textTip">
    <button type="button" class="btn btn-success btn-xs" v-on:click="callFather">通知父组件</button>
  </div>
</template>
<script>


export default {
  data() {
    return {
      textTip:this.propTextTip
    }
  },
   props:['propTextTip'],
  methods:{
      callFather:function() {
          //发射信号
          console.log(this.textTip);
          this.$emit('getCalled',this.textTip);
          //其中 getCalled 是一个自定义的事件,功能类似于一个中转
      }
  }
}

</script>

我们很明显的可以看到上述代码中,就用textTip接收了props中的propTextTip,这样可以成功的避免上述问题。
PS:感慨一下,不间断地返回来看看官方文档,还是很有收获的,平时的一些小错误,都是躺在官方文档里面。书读百遍其义自见,古人智慧,万古真理。

代码来源:https://www.cnblogs.com/cristina-guan/p/9269275.html

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值