vue中父组件用prop给子组件传值，在子组件中修改

在Vue中，父组件通过props向子组件传递数据。如果直接在子组件内修改传递的prop值，Vue会发出警告，因为prop是单向数据流。prop应该被视为只读，子组件应该使用自己的data属性来保存这个值的本地副本。

以下是一个简单的例子：

父组件：

<template>
  <div>
    <child-component :parentValue="valueFromParent"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      valueFromParent: 'initial value'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ localValue }}</p>
    <button @click="localValue = 'new value'">Change Local Value</button>
  </div>
</template>
 
<script>
export default {
  props: {
    parentValue: String
  },
  data() {
    return {
      localValue: this.parentValue
    };
  },
  watch: {
    parentValue(newValue) {
      this.localValue = newValue;
    }
  }
};
</script>

在这个例子中，子组件接收parentValue作为prop，并将其赋值给本地的localValue数据属性。子组件有一个按钮，当点击时，会修改localValue。这种方式避免了直接修改prop，而是在子组件内部管理自己的状态。如果父组件的valueFromParent发生变化，子组件的watch属性会监听这一变化，并更新localValue。