Vue中子组件不能修改父组件传来的Prop值的原因分析

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

<!-- Child.vue -->
<template>
  <div>{{ prop1 }}</div>
</template>
<script>
export default {
  props: {
    prop1: String,
  },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    {{ prop1 }}
    <button @click="changeMsg">Change Message</button>
  </div>
</template>
<script>
export default {
  props: {
    prop1: String,
  },
  methods: {
    changeMsg() {
      this.prop1 = "Hello, world!"; // 修改 prop1 的值
    },
  },
};
</script>

 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. 
    (found in <Root>)

<!-- App.vue -->
<template>
  <div>
    <child :prop1="msg" @change-msg="changeMsg"></child>
  </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</button>
  </div>
</template>
<script>
export default {
  props: {
    prop1: String,
  },
  methods: {
    changeMsg() {
      this.$emit("change-msg", "Hello, world!"); // 触发事件并传递新值
    },
  },
};
</script>

<!-- App.vue -->
<template>
  <div>
    <child :prop1="msg"></child>
  </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</button>
  </div>
</template>
<script>
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>