解决子组件修改props的值报错

在Vue中，props是单向数据流，只能由父组件向子组件传递数据，子组件不应该直接修改props的值。如果子组件需要修改props的值，应该通过事件的方式向父组件发送消息，由父组件来修改props的值。

如果子组件直接修改props的值，会报出一个警告，如下所示：

[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. Prop being mutated: "message"

这个警告的意思是，不要直接修改props的值，因为父组件重新渲染时，props的值会被覆盖。应该使用一个基于props的值的data或computed属性。

下面是一个示例，演示如何通过事件向父组件发送消息，让父组件来修改props的值：

父组件：

<template>
  <div>
    <child :message="message" @update-message="handleUpdateMessage"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleUpdateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

子组件：

<template>
  <div>
    <input v-model="localMessage">
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      localMessage: this.message
    }
  },
  methods: {
    sendMessage() {
      this.$emit('update-message', this.localMessage)
    }
  }
}
</script>

在子组件中，我们使用一个名为localMessage的data属性来保存props的值，然后在发送事件时，将localMessage作为参数传递给父组件，让父组件来修改props的值。