Vuex JS. передача выбранного выпадающего значения между компонентами

Question

Мне нужно выдать выбранное раскрывающееся значение из одного компонента и использовать раскрывающееся значение при нажатии кнопки обновления в родительском компоненте. Используются Vuex и Vuetify.

component1:
<div>
  <v-btn large class="button-refresh" @click="refreshData()">REFRESH
       </v-btn>
      </div>
js part:
refreshData(){
        if(this.fromTs == '' && this.toTs == '')
        {

            this.fromTs = this.dateRange.fromTs;
            this.toTs = this.dateRange.toTs;
        }

     }
component2 has a dropdown and I need the selected value of it in the refresh data function of component1

Answer 1

Я постараюсь вам помочь. Я приведу пример передачи данных между компонентами.

Родительский компонент:

<template>
  <div>
    <h1>Get dropdown value</h1>
    <p>You favorite fast food: {{ food }}</p>
    <SelectDropDown
      label="Select a fast food"
      :options="foods"
      v-model="food"
      autofocus
    />
  </div>
</template>

<script>
import SelectDropDown from './SelectDropDown.vue'
export default {
  data () {
    return {
      food: '',
      foods: ['Pizza', 'Hamburguer', 'Hot dog']
    }
  },
  components: {
    SelectDropDown
  }
}
</script>

Дочерний компонент:

<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <select
      class="select"
      :value="value"
      @input="updateValue"
      v-bind="$attrs"
    >
      <option
        v-for="option in options"
        :key="option"
        :selected="option === value"
        :value="option"
      >
        {{ option }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    options: {
      type: Array,
      required: true
    },
    label: {
      type: String,
      default: ''
    },
    value: [String, Number]
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value)
    }
  }
}
</script>

<style scoped>
.select {
  margin: 24px;
}
</style>

Я получил это из курса VueMastery: "Vue следующего уровня".

Дочерний компонент:

'inheritAttrs: false': по умолчанию vue передает атрибуты от parent к корневому дочернему тегу (в данном случае div). Устанавливая значение false для атрибута attribute.itt, мы можем использовать v-bind = "$ attrs" в теге select, чтобы передать заполнитель в тег select, а не в тег div. В этом примере автофокус применяется к тегу select вместо тега div, поэтому атрибуты html передаются туда, куда нам нужно.

Подробнее: https://vuejs.org/v2/api/#inheritAttrs

реквизита:

options: он установлен в виде массива (вы можете использовать объект, но для его обработки требуется дополнительная логика), корневой компонент отправляет параметры с помощью: options = 'category' в данном случае

метка: она задана как пустая строка, но мы можем передать метку, используя реквизиты с: label = 'Your favourite' в корневом компоненте.

значение: значение выбранного параметра, оно используется для отправки / получения значения в / из родительского элемента, в данном случае это может быть строка или число.

методы:

updateValue(event) {
    this.$emit('input', event.target.value)
}

Этот метод вызывается для события @input. updateValue получает событие, которое происходит, и передает родительскому элементу событие с именем ввода и передает полезную нагрузку (event.target.value). В корневом родительском объекте v-модель обновляется при получении входного события, в этом случае полезная нагрузка устанавливает свойство данных категории. Если установить значение по умолчанию для свойства категории в корневом родительском элементе, это значение будет отправлено дочернему элементу в качестве значения prop.

Родительский компонент:

Вам нужно только импортировать и использовать компонент. : label будет передавать строку в тег label в дочернем компоненте. автофокус применяется, потому что для атрибута атрибута атрибута «false» установлено значение «*».

Не стесняйтесь спрашивать!

Я пытался объяснить внимательно, я не являюсь носителем английского языка, так что, возможно, есть некоторые грамматические ошибки, или я не достаточно ясен, и, возможно, я не понял вашу точку зрения XD, но я надеюсь, что это может помочь вам .