vue 父组件传过去的值子组件改变

在Vue中，父组件可以通过props将数据传递给子组件，而子组件可以通过事件将修改后的值传递回父组件。下面是一个示例代码，演示了如何在Vue中实现父组件传递值给子组件并修改子组件的值：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的值：{{ parentValue }}</p>
    <button @click="changeChildValue">改变子组件的值</button>
    <ChildComponent :childValue="childValue" @updateChildValue="updateChildValue" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '父组件的初始值',
      childValue: ''
    };
  },
  methods: {
    changeChildValue() {
      this.childValue = '子组件的新值';
    },
    updateChildValue(newValue) {
      this.childValue = newValue;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <h3>子组件</h3>
    <p>子组件的值：{{ childValue }}</p>
    <button @click="changeParentValue">改变父组件的值</button>
  </div>
</template>

<script>
export default {
  props: ['childValue'],
  methods: {
    changeParentValue() {
      this.$emit('updateChildValue', '子组件修改父组件的新值');
    }
  }
};
</script>

在上面的示例中，父组件通过props将parentValue传递给子组件，并在子组件中显示。父组件通过changeChildValue方法改变childValue的值，子组件通过点击按钮触发changeParentValue方法，将新的值通过事件updateChildValue传递给父组件，父组件接收到新的值后更新childValue的值。