首先咱们创立子父组件

  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传参数的值 后续间接用它～