vue子组件怎么向父组件传值

在 Vue.js 中，子组件向父组件传值可以通过事件来实现。具体步骤如下：

1. 在子组件中定义一个事件，并在需要的时候触发该事件：

<template>
  <button @click="sendDataToParent">发送数据到父组件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', '我是子组件传递的数据')
    }
  }
}
</script>

在上面的例子中，当用户点击按钮时，子组件会触发 `send-data` 事件，并且传递一个字符串作为参数。

2. 在父组件中监听该事件，并在事件处理函数中获取传递的数据：

<template>
  <div>
    <child-component @send-data="handleDataFromChild" />
    <p>从子组件接收到的数据：{{ dataFromChild }}</p>
  </div>
</template>

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

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

在上面的例子中，父组件中使用 `@send-data="handleDataFromChild"` 监听子组件触发的 `send-data` 事件，并在事件处理函数 `handleDataFromChild` 中获取了子组件传递的数据，并将其赋值给 `dataFromChild` 属性。在父组件模板中，可以通过 `{{ dataFromChild }}` 显示从子组件接收到的数据。

通过以上步骤，我们就可以实现子组件向父组件传值的功能了。