Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

 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: "seat"

父组件传了一个seat给子组件，这个seat是从登录页面的input表单通过localstorage传过来的

在这里我要对这个seat值进行修改，然后提交给后台

我是这样实现的

props: {
    seat: {
      type: String
    }
  },

<div class="van-col van-col--12" :span="12">您的座位号</div>
  <div class="van-col van-col--12 number" style="text-align: right">
    <input id="number" type="number" v-model="seat" ref="input">
  </div>
</div>
<cube-button @click="sku_addCart" :primary="true">提交订单</cube-button>

然后测试：

修改座位号数据

截图

意思是：组件内不能修改props的值，同时修改的值也不会同步到组件外层，父组件方不知道子组件内部当前的状态是什么。

因为传入的prop中的值是不允许改变的。这个在vue更新后才会出现的

那我一定要修改这个值，怎么做？

这里我在data里面重新声明一个变量

newseat: this.seat

改一下input的v-model="newseat"

在提交里面

console.log('座位号 ' + this.newseat)
this.$emit('getCalled', this.newseat)

修改

并且没有报错，
这里打印的是要传给后台的数据，不会渲染到所有的页面

问题解决