关于vue.js:子组件中修改props的正确方式

首先咱们创立子父组件

1. 父组件传值 msgVal 给子组件

<template>

<div style="height:5000px;background:#fff;">
    <h5> 子父组件传值（子组件扭转 prop 值）</h5>
    <p>
        {{msg}}
    </p>
    <vChild :msgVal='msg'></vChild>
    
</div>

</template>
<script>

import vChild from './vChild.vue'
export default {
    components:{vChild},
    data(){
        return{msg:'这是父组件哦'}
    }
}

</script>

<style lang=”scss” scoped>

</style>

2. 在子组件中：（咱们尝试用 changeProps 间接扭转 msgVal 值）

<template>

<div style="height:5000px;background:#fff;">
    <h5> 子组件 </h5>
    props:{{msgVal}}
   <el-button @click="changeProps"> Start</el-button> 
</div>

</template>

<script>

export default {props:['msgVal'],
    data(){return{}
    },
    methods:{changeProps(){this.msgVal = '扭转了 props'}
    }
}

</script>

<style lang=”scss” scoped>

</style>

控制台报如下谬误：![image.png](/img/bVbKrAC)
简略来说就是 他心愿防止间接扭转该属性 最好用计算属性值或者基于属性值的数据来去批改他


所以～咱们能够这样：plan1:``` data 中申明 mag1 在 mounted 函数中初始化赋值 后续操作间接用 mag1 来代替 msgVal

        props:['msgVal'],
        data(){
            return{mag1:''}
        },
        methods:{changeProps(){console.log('111111')
                this.mag1 = '扭转了 props'
            }
        },
        mounted(){this.mag1 = this.msgVal},
        computed:{msg2(){return this.msgVal} 
        },
    }

PlanB: 用计算属性来获取值 msg2 即为 props 传参数的值 后续间接用它～