vue 子组件访问父组件中data的值

在 Vue 中，子组件可以通过 `props` 属性接收父组件传递的数据，但是子组件无法直接访问父组件中的 `data`。如果子组件需要访问父组件中的 `data`，可以通过 `$emit` 事件来实现。

具体步骤如下：

1. 在父组件中定义一个方法，用来更新 `data` 中的值，并通过 `$emit` 事件将该值传递给子组件。

// 父组件
<template>
  <div>
    <ChildComponent :parentData="parentData" @updateParentData="updateParentData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: '父组件中的值'
    }
  },
  methods: {
    updateParentData(data) {
      this.parentData = data;
    }
  }
}
</script>

2. 在子组件中定义一个 `props` 属性，接收父组件传递的数据，并在需要修改父组件中的 `data` 时，通过 `$emit` 事件将修改后的值传递给父组件。

// 子组件
<template>
  <div>
    <p>父组件中的值是：{{ parentData }}</p>
    <button @click="updateData">修改父组件中的值</button>
  </div>
</template>

<script>
export default {
  props: {
    parentData: String
  },
  methods: {
    updateData() {
      const newData = '修改后的值';
      this.$emit('updateParentData', newData);
    }
  }
}
</script>

这样，子组件就可以通过 `$emit` 事件将修改后的值传递给父组件，从而实现子组件访问父组件中 `data` 的值的目的。