当前位置: 首页 > Web前端 > vue.js

在Vue中,最近在写组件中发现了解决“...popsvalue.Propbeingmutated--number-”

时间:2023-03-31 20:43:44 vue.js

的解决方法。引用组件传值时,如果在引用的组件中修改了值,在页面上显示没有问题,但是打开控制台会发现以下八个错误:“避免直接修改props”*[Vuewarn]:避免直接修改prop,因为只要父组件重新渲染,该值就会被覆盖。相反,使用基于prop值的数据或计算属性。Propbeingmutated:"number"Vue不建议修改props数据。如果改变传入的值,子组件中的数据将被重新渲染。如何解决1、如果使用的变量不需要在父组件中传入并初始化,那么可以在子组件的data()函数中返回值初始化,或者直接使用状态管理值。2、子组件有默认值,比如:输入框Input,里面包含v-model和一个显示输入值的Card组件,使用v-model进行数据绑定,所以我们需要添加自定义事件来解决:this.$emit('updata-number',myNumber)是通过updata-number事件名从myNUmer发送数据。由于发送自定义数据,父组件需要监听updata-number事件。`方法:{add(){varmyNumber=this.number;我的号码++;this.$emit("update-number",myNumber);}}`Card请注意,myNumber作为参数发送。updata函数需要一个参数来获取数据,然后在每次更新props时刷新自定义事件获取到的数字数据,这样就可以进行数据绑定,不报错。