子组件中修改props的正确方式

首先我们创建子父组件

父组件传值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>

控制台报错
简单来说就是 他希望避免直接改变该属性 最好用计算属性值或者基于属性值的数据来去修改他

所以～我们可以这样：
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传参数的值 后续直接用它～