uniapp 改变父组件传递给子组件的参数

xiequanshuai

已于 2023-09-13 11:05:47 修改

阅读量745

点赞数

文章标签： uni-app 前端 javascript

于 2023-09-13 11:05:13 首次发布

本文链接：https://blog.csdn.net/xiequanshuai/article/details/132848266

版权

本文讨论了在Vue.js中如何避免在子组件直接修改从父组件传递的`props`值，推荐使用data属性或计算属性。通过示例展示了如何在子组件中通过`v-model`和自定义方法`changeMeritMaster`安全地更新prop值。

摘要由CSDN通过智能技术生成

在做项目的时候遇到这样一个问题，要在子组件中改变父组件传递过来的值，遇到问题如下：

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

翻译：避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。道具正在变异：“meritMaster”

解决办法：在子组件的data中设置一个变量来接收父组件传递过来的参数，总组件改变data中的变量即可。代码如下

<input type="text" v-model="randNum" @input="changeMeritMaster"  />

data() {
    return {            
        randNum: this.meritMaster,//随机数
    }
},                
props:{    
    meritMaster:{
        type:Number,
        default:0
    },    

},
methods: {    
    //改变变量的值
    changeMeritMaster(e){
        this.randNum = e.detail.value
        //console.log(this.randNum)
    },
            
}