vue 父传子 子改父

在 Vue 中，父组件传递给子组件的 props 是只读的，如果子组件想要修改父组件传过来的数据，需要通过 $emit 向上传递事件，让父组件去修改数据。

以下是一个示例，假设父组件传递一个名为 message 的数据给子组件：

// Parent.vue
<template>
  <div>
    <Child :message="message" @update-message="updateMessage" />
    <p>Message in Parent: {{ message }}</p>
  </div>
</template>

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

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

子组件：

// Child.vue
<template>
  <div>
    <p>Message in Child: {{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    changeMessage() {
      this.$emit('update-message', 'Hello from Child')
    }
  }
}
</script>

子组件的 changeMessage 方法通过 $emit 向上传递 update-message 事件，并传递一个新的消息字符串。父组件监听 update-message 事件，并在 updateMessage 方法中修改 message 数据。这样就实现了子组件修改父组件数据的功能。