vue中子组件传参数给父组件

在Vue中，子组件向父组件传递参数可以通过自定义事件和`$emit`方法实现。

首先，在子组件中定义一个方法，用于触发自定义事件并传递参数给父组件。可以使用`$emit`方法来触发事件，第一个参数是事件名称，第二个参数是要传递给父组件的数据。

<template>
  <button @click="sendDataToParent">传递参数给父组件</button>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('custom-event', 'Hello from child component');
    }
  }
}
</script>

接下来，在父组件中，使用子组件的标签，并监听自定义事件。当子组件触发自定义事件时，父组件的事件处理方法会被调用，并接收到子组件传递的参数。

<template>
  <div>
    <child-component @custom-event="handleChildData"></child-component>
    <p>从子组件接收的数据: {{ childData }}</p>
  </div>
</template>

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

在父组件中，定义一个变量`childData`用于存储从子组件接收到的数据。然后，在父组件中的事件处理方法`handleChildData`中，将子组件传递的数据赋值给`childData`变量。

这样，子组件就可以通过自定义事件向父组件传递参数了。父组件通过监听自定义事件，并在事件处理方法中接收子组件传递的数据。