子组件如果向父组件传递数据是怎么做到

在 Vue.js 中，子组件向父组件传递数据可以通过自定义事件来实现。子组件可以通过 `$emit` 方法触发一个自定义事件，并且可以传递数据给父组件。

下面是一个示例，演示了子组件向父组件传递数据的过程：
 

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent"></ChildComponent>
    <p>Received data from child: {
  
  { receivedData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    }
  },
  methods: {
    handleChildEvent(data) {
      this.receivedData = data;
    }
  }
}
</script>
htmlCopy Code<!-- ChildComponent.vue -->
<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'Hello from child';