Vuejs2 Vuex js。在组件之间传递选定的下拉值
我需要从一个组件发出一个选定的下拉值,并在父组件中单击刷新按钮时使用下拉值。使用Vuex和vuetifyVuejs2 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 == '' &
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)
}