一、自定义事件（$emit）

在Vue中，子组件向父组件传递数据可以通过自定义事件来实现。以下是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component @childEvent="handleChildEvent"></child-component>
  </div>
</template>

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

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

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <button @click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'Hello, Parent!';
      this.$emit('childEvent', data);
    }
  }
};
</script>

父组件通过@childEvent="handleChildEvent"监听子组件触发的childEvent事件。当子组件调用this.$emit('childEvent', data)时，会将data作为参数传递给父组件的handleChildEvent方法。
父组件可以在handleChildEvent方法中接收数据并进行相应处理。在这个例子中，父组件将接收到的数据赋值给message，然后在模板中显示出来。
当在子组件中点击按钮时，就会向父组件传递数据，并在父组件中更新相应的状态。

二、$refs

父组件可以通过ref属性引用子组件，然后通过引用直接访问子组件的属性和方法。这样可以实现子组件向父组件传递数据。

<!-- 父组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <child-component ref="childRef"></child-component>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    getChildData() {
      const childData = this.$refs.childRef.data;
      this.message = childData;
    }
  }
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <!-- 子组件的数据 -->
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 'Hello, Parent!'
    };
  }
};
</script>

父组件通过给子组件添加ref="childRef"属性来引用子组件。然后，在父组件的getChildData方法中，可以通过this.$refs.childRef访问子组件的属性和方法。
在这个例子中，父组件通过this.$refs.childRef.data获取子组件的data属性，并将其赋值给message，然后在模板中显示出来。

组件通信——子传父

一、自定义事件（$emit）

二、$refs