vue子组件获取父组件数据

在Vue中，组件之间传递数据可以通过props和事件两种方式实现。

1. 使用props进行父子组件之间的数据传递：
- 在父组件中通过props属性将数据传递给子组件。
- 在子组件中通过props接收父组件传递的数据。

示例代码：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="dataFromParent"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      dataFromParent: 'Hello from parent component!'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

2. 使用自定义事件进行兄弟组件或非直接关联组件之间的数据传递：
- 在子组件中通过$emit触发一个自定义事件，并传递数据。
- 在父组件中使用v-on监听子组件触发的自定义事件，并在事件处理方法中获取传递的数据。

示例代码：

<!-- 兄弟组件 -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from sibling component!');
    }
  }
};
</scrip