vue的子组件传递信息给父组件

在Vue中，子组件可以通过事件将信息传递给父组件。以下是一种常见的方式：

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

<template>
  <button @click="sendInfo">发送信息给父组件</button>
</template>

<script>
export default {
  methods: {
    sendInfo() {
      this.$emit('info', '这是子组件传递给父组件的信息');
    }
  }
}
</script>

在父组件中，使用 `v-on` 或简写的 `@` 绑定子组件触发的自定义事件，并在对应的方法中接收传递的信息。例如：

<template>
  <div>
    <child-component @info="receiveInfo"></child-component>
    <p>接收到的信息：{{ receivedInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedInfo: ''
    }
  },
  methods: {
    receiveInfo(info) {
      this.receivedInfo = info;
    }
  }
}
</script>

上述代码中，子组件通过 `$emit('info', ...)` 触发了一个名为 `info` 的自定义事件，并传递了信息 `'这是子组件传递给父组件的信息'`。父组件中通过 `@info="receiveInfo"` 绑定了该事件，并在 `receiveInfo` 方法中接收到了传递的信息，并将其保存在 `receivedInfo` 数据中。最后，通过 `{{ receivedInfo }}` 将接收到的信息展示在界面上。

这样，子组件就可以将信息传递给父组件了。