在VUE中将值发送到父组件时需要帮助

// 子组件
<template>
  <button @click="sendValue">发送值到父组件</button>
</template>

<script>
export default {
  methods: {
    sendValue() {
      this.$emit('value-updated', '需要发送的值');
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @value-updated="handleValue"></child-component>
    <p>接收到的值：{{ receivedValue }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    }
  },
  methods: {
    handleValue(value) {
      this.receivedValue = value;
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component :value="parentValue" @value-updated="handleValue"></child-component>
    <p>接收到的值：{{ receivedValue }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '需要发送的值',
      receivedValue: ''
    }
  },
  methods: {
    handleValue(value) {
      this.receivedValue = value;
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="sendValue">发送值到父组件</button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    sendValue() {
      this.$emit('value-updated', '修改后的值');
    }
  }
}
</script>