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课程获得的：“ Next level Vue”。

子组件：

'inheritAttrs：false'：默认情况下，vue将属性从父级传递到根子级标记（在这种情况下为div）。通过将InheritedAttrs设置为false，我们可以在选择标签中使用v-bind =“ $ attrs”将占位符传递给选择标签，而不是传递给div标签。在此示例中，自动对焦将应用于select标签而不是div标签，因此html属性会传递到我们想要的位置。

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

道具：

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

label：它设置为空字符串，但我们可以使用根组件中带有：label ='您最喜欢的食物'的道具来传递标签。

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

方法：

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

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

父组件：

您只需要导入和使用该组件。：label会将String传递给子组件中的label标签。之所以使用自动对焦，是因为InheritAttrs设置为false。

随时提问！

我试图仔细解释，我不是英语母语人士，所以可能存在一些语法错误，或者我不够清楚，也许我没明白您的XD观点，但是我希望这可以对您有所帮助

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

1 个答案: