Vuejs2 Vuex js。在组件之间传递选定的下拉值

Vuejs2 Vuex js。在组件之间传递选定的下拉值,vuejs2,vuetify.js,Vuejs2,Vuetify.js,我需要从一个组件发出一个选定的下拉值,并在父组件中单击刷新按钮时使用下拉值。使用Vuex和vuetify component1: <div> <v-btn large class="button-refresh" @click="refreshData()">REFRESH </v-btn> </div> js part: refreshData(){ if(this.fromTs == '' &

我需要从一个组件发出一个选定的下拉值,并在父组件中单击刷新按钮时使用下拉值。使用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
组件1:
刷新
js部分:
刷新数据(){
if(this.fromTs==''&&this.toTs='')
{
this.fromTs=this.dateRange.fromTs;
this.toTs=this.dateRange.toTs;
}
}
component2有一个下拉列表,我需要在component1的刷新数据函数中选择它的值

我会尽力帮助你。我将给出一个关于在组件之间传递数据的示例

父组件:

<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>
在@input事件上调用此方法。updateValue接收正在发生的事件并向父级发出一个名为input的事件,并传递一个有效负载(event.target.value)。在根父级中,当接收到输入事件时,v-model正在更新,在这种情况下,有效负载将设置category data属性。如果在根父级中为类别属性设置默认值,则该值将作为值属性发送给子级

父组件:

您只需导入并使用组件即可:label将向子组件中的label标记传递一个字符串。由于inheritAttrs设置为false,因此应用了自动聚焦

请随意提问


我试着仔细解释,我不是以英语为母语的人,所以可能有一些语法错误或者我不够清楚,也许我不明白你的意思XD,但我希望这能对您有所帮助。

如果您提供了一些关于您正在尝试执行的操作的代码,以便人们能够了解您当前如何尝试解决问题,这可能会有所帮助。
updateValue(event) {
    this.$emit('input', event.target.value)
}