vue中子组件不能直接修改父组件传来的prop值，Prop 是一种传递数据的机制，父组件通过 Prop 向子组件传递数据，子组件通过 Props 接收父组件传递过来的数据，这些数据被封装成一个个解构体形式的对象，不能直接进行修改。这样做的好处是保证了单向数据流，即只有父组件能够更新 Prop，然后数据会自动流向子组件，从而避免了数据的混乱与不可预测性。

方法一：

使用事件触发机制

 在 Vue 中，子组件可以通过 $emit() 方法来触发父组件中定义的事件。当父组件收到事件时，它可以调用一个方法来更新它自己的状态，传递给子组件一个新的 Prop。这种方式可以让子组件告诉父组件需要更新的数据，而不是直接修改它。

<!--父组件-->
<template><div><chlid :prop1="msg" @change-msg="changeMsg"></chlid></div>
</template>
<script>
import Child from "./Child.vue";
export default{components:{Child},data(){return{msg:"Hello,Vue!"}},methods:{changeMsg(newMsg){this.msg=newMsg;//更新父组件中的数据}}
}
</script>

<!--子组件Child.vue-->
<template><div>{{prop1}}<button @click="changeMsg">Change Message</botton></div>
</template>
<script>
export default{props:{prop1:String},methods:{changeMsg(){this.$emit("change-msg","Hello,world!")//触发事件并传递新值}}
}
</script>

 方法二：

使用计算属性

计算属性本质上是一个函数，它接收一个参数，并且返回一个根据这个参数计算得到的值。这个值可以在组件的模板中使用。

<!--父组件-->
<template><div><chlid :prop1="msg"></chlid></div>
</template>
<script>
import Child from "./Child.vue";
export default{components:{Child},data(){return{msg:"Hello,Vue!"}}
}
</script>

<!--子组件Child.vue-->
<template><div>{{modifiedProp}}<button @click="changeMsg">Change Message</botton></div>
</template>
<script>
import Child from "./Child.vue";
export default{props:{prop1:String}computed:{modifiedProp:{get(){return this.prop1},set(newVal){this.$emit("update:prop1",newVal)}}}methods:{changeMsg(){this.modifiedProp="Hello,world!";//使用计算属性更新Prop的值}}
}
</script>