如何为 v-select 组件将值从 child 传递到 parent

How to pass value from child to parent for v-select component

我确定我只是忽略了显而易见的东西,但我在这方面遇到了一点麻烦:带有一个 v-select 控件的简单组件并将选定的值传递给 parent。我的代码:

//CHILD 控制

    <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>

//PARENT

    <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.

惯例是接受值作为名为 value 的绑定 属性,并作为名为 input 的事件发出所需的新值。

v-model 期望事件被调用 input,而不是 change

代码看起来不错。可能是事件名称冲突。尝试将您的自定义事件名称更改为 @change 以外的名称。 @change 已经是原生vue事件了。

这真的非常简单,我刚刚在

中将 'change' 更改为 'input'
this.$emit('input', this.selectedOption);

而且有效!

非常感谢!!