从另一个组件访问数据答案

【问题标题】：Access data from another Component从另一个组件访问数据
【发布时间】：2020-02-22 07:43:39
【问题描述】：

现在我有 2 个组件 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>

用方法

     methods: {
          selectedCompound(h2o) {
         console.log(h2o);
         console.log("This is from Selected Compound");
                 },

我在另一个页面中调用它

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

现在我想获取方法“selectedCompound”并在此页面上调用它

所以当用户从 v-select 中选择另一个名称时，我可以访问它的 ID 以重新加载页面

【问题讨论】：

你应该阅读emitting events from components。您不需要从父组件调用该函数。
你想从子组件中获取选定的值吗？还是直接从父组件执行子组件的方法？
@ChristianCarrillo 从子组件中获取值以使用它重新加载具有此 ID 的页面
任何帮助，我已经花了 3 天时间来解决它蚂蚁不能

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

道具被向下传递，事件被向上发射。如果你想在父子之间直接通信，你将 props 从父传递给子，子对值的变化做出反应。如果您然而希望父组件对子组件的更改做出反应，则需要emit 事件。

这是一个例子。

孩子

methods: {
   selectedCompound(h2o) {
       this.$emit('valChange', h2o)
   },
}

家长

<div>
    <SelectCompound @valChange="handleChange"></SelectCompound>
</div>

methods: {
   handleChange(h2o) {
       // handle here
       console.log('parent noticed change ' + h2o)
   },
}

您也可以使用总线（如 Vuex）让所有组件与单独的状态管理器进行通信，但与简单的 even emit 相比，它会增加相当多的复杂性。

【讨论】：

【解决方案2】：

我为您制作了这个jsfiddle，如果您需要重新加载页面，则使用localStorage作为持久性，并在选择选择的任何选项时发出事件，触发的此事件称为change选择标签，那么您只需将所选值发送给父级。并使用Vue的生命周期方法created()从持久化中初始化值。

【讨论】：