如何访问嵌套vue.js组件的值？

<!-- 父组件 -->
<template>
  <div>
    <child-component :value="data" @update="handleUpdate"></child-component>
    <!-- 其他父组件内容 -->
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'Hello World'
    };
  },
  methods: {
    handleUpdate(value) {
      console.log(value); // 输出子组件传递的值
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ value }}</p>
    <button @click="updateValue">Update</button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue() {
      const newValue = 'New Value';
      this.$emit('update', newValue); // 触发自定义事件，并传递新的值给父组件
    }
  }
};
</script>