时间戳

首页 > 解决方案 > Vuex.js。在组件之间传递选定的下拉值

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

问题描述

我需要从一个组件发出一个选定的下拉值，并在单击父组件中的刷新按钮时使用下拉值。使用了 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

标签： vuejs2vuetify.js

解决方案

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

父组件：

<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 将属性从父标签传递给根子标签（本例中为 div）。通过将 inheritAttrs 设置为 false，我们可以在 select 标签中使用 v-bind="$attrs" 将占位符传递给 select 标签而不是 div 标签。在此示例中，自动对焦应用于 select 标签而不是 div 标签，因此 html 属性传递到我们想要它们的位置。

更多信息：https ://vuejs.org/v2/api/#inheritAttrs

道具：

options：它被设置为一个数组（你可以使用一个对象，但它需要一些额外的逻辑来处理它），在这种情况下，根组件使用 :options='categories' 发送选项

label：它被设置为一个空字符串，但是我们可以在根组件中使用带有 :label='Your favorite food' 的 props 来传递标签。

value：所选选项的值，用于向/从父级发送/接收值，在这种情况下，它可以是字符串或数字。

方法：

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

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

父组件：

您只需要导入和使用该组件。:label 会将一个字符串传递给子组件中的标签标签。应用了自动对焦，因为 inheritAttrs 设置为 false。

随意问！

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

推荐阅读