vue子组件向父组件传值

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>从子组件接收的值：{{ receivedValue }}</p>
  </div>
</template>

<script>
import ChildComponent from './components/HelloWorld';

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendValueToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendValueToParent() {
      // 向父组件传递值
      this.$emit('childEvent', '这是从子组件传递给父组件的值');
    }
  }
};
</script>