vue3 子传父

Vue 3 中子组件向父组件传递数据可以使用 `emit` 方法。具体步骤如下：

1. 在子组件中定义一个事件，使用 `this.$emit('eventName', data)` 触发该事件，并将数据 `data` 传递给父组件。

2. 在父组件中监听子组件的事件，使用 `@eventName="handler"` 或 `v-on:eventName="handler"` 来绑定事件处理函数 `handler`，并在函数中接收子组件传递过来的数据。

下面是一个简单的示例：

子组件 Child.vue：

<template>
  <button @click="handleClick">点击传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('passData', { name: 'Tom', age: 18 })
    }
  }
}
</script>

父组件 Parent.vue：

<template>
  <div>
    <child @passData="handlePassData"></child>
    <p>子组件传递的数据：{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  methods: {
    handlePassData(data) {
      this.data = data
    }
  }
}
</script>

在子组件中点击按钮后，会触发 `passData` 事件，并将 `{ name: 'Tom', age: 18 }` 作为参数传递给父组件。父组件中的 `handlePassData` 方法会接收到这个参数，并将数据赋值给 `data`，从而实现了子组件向父组件传递数据的功能。