Vue中子组件修改父组件传来的Prop值

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.sync="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>