在app.vue中添加两个组件，分别传值

在 Vue.js 中，要在 `app.vue` 文件中添加两个组件并传递数据，你可以按照以下步骤操作：

首先，确保你已经在 `app.vue` 文件中安装了需要的组件，并且它们已经定义好了接收数据的 prop。例如，假设你有两个组件：`ComponentA` 和 `ComponentB`。

<template>
  <div id="app">
    <!-- 在这里放置你的组件 -->
    <ComponentA :data="parentData" />
    <ComponentB :data="parentData" />
  </div>
</template>

<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

export default {
  name: 'App',
  components: { ComponentA, ComponentB },
  data() {
    return {
      parentData: {} // 这里初始化一个空的对象，用于传递数据
    };
  }
};
</script>

然后，在 `ComponentA` 和 `ComponentB` 组件内部，它们可以访问并处理接收到的 `parentData`：

<!-- 在ComponentA.vue中 -->
<template>
  <div>
    <h2>Component A</h2>
    {{ parentData }}
  </div>
</template>

<script>
export default {
  props: ['data']
};
</script>

<!-- 在ComponentB.vue中 -->
<template>
  <div>
    <h2>Component B</h2>
    {{ parentData }}
  </div>
</template>

<script>
export default {
  props: ['data']
};
</script>

当你在 `app.vue` 中更新 `parentData` 的值，两个组件都会同步更新显示的数据。