Avoid mutating a prop directly since the value will be overwritten...... Vue2组件props传值更改报错

最新推荐文章于 2024-09-06 10:38:18 发布

苏苏绿豆酥

最新推荐文章于 2024-09-06 10:38:18 发布

阅读量492

点赞数

CC 4.0 BY-SA版权

文章标签： vue2.0 父子组件传值

本文链接：https://blog.youkuaiyun.com/weixin_42526917/article/details/80817877

本文解决Vue2.0中子组件修改props值的问题。介绍如何通过创建中间变量来实现数据更新，保持数据单向流动的原则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.0在使用props进行父子组件传值时，子组件需要改变props中的值报错！

以下是源代码：

props: {
        ratings: {
            type: Array,
            default() {
                return [];
            }
        },
        selectType: {
            type: Number
        }
}，

methods: {
        select (type, event){
            if (!event._constructed){
                return
            }
            this.selectType = type
        }
    }

在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。

解决方案：

在data中创建一个变量 ratingType，并将 selectType 的值赋值给它，再在方法中调用即可。

 data () {
        return{
            ratingType: this.selectType
        }
    },
    methods: {
        select (type, event){
            if (!event._constructed){
                return
            }
            this.ratingType = type
        }
    }

搞定！