vue3中子向父组件传值vue3

在Vue 3中，子组件向父组件传值可以通过自定义事件来实现。以下是一种常见的实现方式：

1. 在子组件中，使用`$emit`方法触发一个自定义事件，并传递需要传递给父组件的值。例如：

// 子组件
<template>
  <button @click="sendValue">传值给父组件</button>
</template>

<script>
export default {
  methods: {
    sendValue() {
      this.$emit('custom-event', '传递的值');
    }
  }
}
</script>

2. 在父组件中，使用`v-on`指令监听子组件触发的自定义事件，并在对应的方法中接收传递的值。例如：

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

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

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

通过以上方式，子组件可以将需要传递给父组件的值通过自定义事件传递出去，父组件则可以通过监听该事件并接收传递的值。这样就实现了子向父组件的值传递。