Vue.js 从另一个组件访问数据

现在我有两个组件 1-只是一个下拉列表v-select

<v-row align="center" >
  <v-col class="d-flex" cols="12" sm="6" v-if="Compounds" >

  <v-select :items="Compounds" 
          v-model="selectedItems" 
          label="Select"
          item-value="id"
          item-text="name"
          v-on:change="selectedCompound">
</v-select>
{{ selectedItems }}
  </v-col>
</v-row>

我在另一页中称之为

          <div>
       <SelectCompound></SelectCompound>
         </div>

现在我想得到“selectedcomponent”方法，并在本页上调用它

因此，当用户从v-select中选择另一个名称时，我可以访问它的ID以重新加载页面。我为您做了这个，如果您需要重新加载页面，则使用

localStorage

作为持久性，并在选择任何选项时发出一个事件，该事件在select标记上被称为

change

，然后，只需将选定的值发射给父对象。

---

并使用

Vue

的生命周期方法

created（）

从持久性初始化值

道具向下传递，事件向上发射。如果您想在父级和子级之间直接通信，您可以将道具从父级传递给子级，子级会对值的更改做出反应。但是，如果希望父组件对子组件的更改做出反应，则需要发出

事件

这里有一个例子

小孩
方法：{
选定化合物（h2o）{
此.$emit（'valChange'，h2o）
},
}

父母亲


方法：{
手变（h2o）{
//在这里处理
console.log（'parent noted change'+h2o）
},
}

您也可以使用总线（如Vuex）让所有组件与单独的状态管理器通信，但与简单的甚至发射相比，它增加了相当多的复杂性。
您应该阅读相关内容。您不需要从父组件调用函数。是否要从子组件获取所选值？或者只是从父组件执行子组件的方法？@ChristianCarrillo从子组件获取值以使用它来重新加载带有此idany帮助的页面。请，我已经花了3天时间来解决它
          <div>
       <SelectCompound></SelectCompound>
         </div>