Question

现在我有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以重新加载页面

Answer 1

我为您制作了此jsfiddle，如果您需要重新加载页面，请使用localStorage作为持久性，并在选择select中的任何选项时发出一个事件，该事件被触发称为{ {1}}，然后将选择的值发送给父级。并使用change的生命周期方法created()从持久性初始化值。

Answer 2

道具被传递，事件被发出。如果您想直接在父母与孩子之间进行交流，则将道具从父母传递给孩子，然后孩子对价值的变化做出反应。如果您但是希望父级对更改子级组件做出反应，则需要进行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）使所有组件与单独的状态管理器进行通信，但是与简单的均发相比，它增加了相当多的复杂性。

从另一个组件访问数据

2 个答案:

孩子

父母