子组件修改父组件传来的数据并将修改后的数据返回给父组件

<p>可以通过在父组件中定义一个方法，将该方法通过 props 传递给子组件，在子组件中调用该方法来修改父组件传来的数据，并将修改后的数据作为参数传递给该方法，从而将修改后的数据返回给父组件。</p>
<p>示例代码：</p>
<p>// 父组件
<template></p>
  <div>
    <p>父组件数据：{{data}}</p>
    <Child :childData="data" :changeData="changeData"></Child>
  </div>
</template>
<script>
import Child from './Child.vue'

export default {
  data() {
    return {
      data: '父组件初始数据'
    }
  },
  components: {
    Child
  },
  methods: {
    changeData(newData) {
      this.data = newData
    }
  }
}
</script>
<p>// 子组件
<template></p>
  <div>
    <p>子组件数据：{{childData}}</p>
    <button @click="changeChildData">修改数据</button>
  </div>
</template>
<script>
export default {
  props: {
    childData: String,
    changeData: Function
  },
  methods: {
    changeChildData() {
      const newData = '子组件修改后的数据'
      this.changeData(newData)
    }
  }
}
</script>