vue中子组件给父组件传值

子组件给父组件传值可以通过 `$emit` 方法实现。

1. 在子组件中定义一个方法，并在方法中触发 `$emit` 事件。

<template>
  <div>
    <button @click="onClick">点击传值</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('my-event', 'hello world')
    }
  }
}
</script>

2. 在父组件中监听子组件的 `$emit` 事件，并在事件处理函数中获取子组件传递的值。

<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

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

在上述代码中，父组件中通过 `@my-event` 监听子组件触发的 `$emit` 事件，并在 `handleEvent` 方法中获取子组件传递的值并赋值给 `message` 属性，最终在模板中显示。