Доступ к данным из другого компонента

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.

Answer 1

Реквизиты передаются, События генерируются. Если вы хотите общаться напрямую между родителем и потомком, вы передаете реквизиты от родителя к потомку, и ребенок реагирует на изменение значения. Если вы однако хотите, чтобы родитель реагировал на изменения дочернего компонента, вам нужно emit события.

Вот пример.

Child

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

Parent

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

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

Вы также можете использовать шину (например, Vuex), чтобы все компоненты взаимодействовали с отдельным менеджером состояний, но это несколько усложняет сложность по сравнению с простымидаже излучать.

Answer 2

Я сделал это jsfiddle для вас, используя localStorage как постоянство, если вам нужно перезагрузить страницу, и отправляя событие, когда выбран какой-либо параметр выбора, это событие вызывается change на теге select, тогда вы просто отправляете родительскому элементу выбранное значение. И используя метод жизненного цикла created() из Vue, чтобы инициировать значение из персистентности.