如何为 v-select 组件从子级传递值到父级
Posted
技术标签:
【中文标题】如何为 v-select 组件从子级传递值到父级【英文标题】:How to pass value from child to parent for v-select component 【发布时间】:2019-11-16 01:35:06 【问题描述】:我确信我只是忽略了显而易见的事情,但是我在这个方面遇到了一些麻烦:带有一个 v-select 控件并将所选值传递给父级的简单组件。我的代码:
//儿童控制
<template>
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex d-flex xs12 sm6 md8>
<v-flex xs12 sm6 offset-sm3>
<v-flex xs12 sm6 d-flex>
<v-select :placeholder="placeholder"
:items="options"
item-value="id"
item-text="name"
class="form-control-select"
@input="changeMonth()"
v-model="selectedOption">
</v-select>
</v-flex>
<span>Child component: selectedOption </span>
</v-flex>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default
name: 'FormSelect',
props:
placeholder: type: String ,
options: type: Object
,
data: function ()
return
selectedOption: 0
,
methods:
changeMonth: function ()
console.log("child changed: " + this.selectedOption);
this.$emit('change', this.selectedOption);
</script>
//父母
<template>
<div>
<div>
<dropdown2 id="component-dropdown2" :options="months" :placeholder="placeholderValue" v-model="selectedMonth" @change="monthChanged"></dropdown2>
<span>Parent component: selectedMonth</span>
</div>
</div>
</template>
<script>
import Dropdown2 from '../addons/Dropdown2';
export default
components:
Dropdown2,
,
data()
return
placeholderValue: 'Month',
months: [ id: 1, name: 'Jan' , id: 2, name: 'Feb' , id: 3, name: 'Mar' ,],
selectedMonth: null
,
methods:
monthChanged()
console.log("Month changed. Selected ID: ", this.selectedMonth);
</script>
我不知道还有什么可以尝试的;有人可以帮助我吗?
非常感谢!
N.
【问题讨论】:
【参考方案1】:约定是将值作为绑定属性value
接受,并将所需的新值作为input
事件发出。
v-model
期望事件被称为input
,而不是change
。
【讨论】:
【参考方案2】:这真的非常简单,我刚刚将“更改”更改为“输入”
this.$emit('input', this.selectedOption);
它有效!
非常感谢!!
【讨论】:
【参考方案3】:代码看起来不错。可能是事件名称冲突。尝试将您的自定义事件名称更改为 @change
以外的名称。 @change
已经是原生 vue 事件。
【讨论】:
以上是关于如何为 v-select 组件从子级传递值到父级的主要内容,如果未能解决你的问题,请参考以下文章