vue 子组件向父组件传值

在 Vue 中，子组件向父组件传值需要使用自定义事件。

首先，在子组件中，通过 `$emit` 方法触发一个自定义事件，并传递需要传递的值，例如：

<template>
  <button @click="$emit('update:count', count + 1)">
    Increment
  </button>
</template>

<script>
export default {
  props: {
    count: Number
  }
}
</script>

在上面的例子中，子组件中的按钮被点击时，会触发一个名为 `update:count` 的自定义事件，并将 `count + 1` 作为参数传递给父组件。

然后，在父组件中，监听这个自定义事件，并在事件处理函数中更新父组件的数据，例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <child-component :count="count" @update:count="updateCount"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    updateCount(newCount) {
      this.count = newCount
    }
  }
}
</script>

在上面的例子中，父组件中通过 `@update:count="updateCount"` 监听子组件中触发的 `update:count` 自定义事件，并将事件处理函数设置为 `updateCount`。当子组件触发自定义事件时，`updateCount` 方法会被调用，更新父组件的数据。

注意：子组件中的 `count` 属性需要通过 `props` 声明并传递给子组件。在父组件中，使用 `:count="count"` 将父组件的 `count` 数据作为 `props` 传递给子组件。