如何为 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 组件从子级传递值到父级的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs 中从子级到父级的事件监听

如何在树结构中从子级移动到父级?

将班级名称从子级移动到父级

将数据从子功能组件传递到父组件 - React/Typescript

将多个引用从子组件传递到父组件-Reactjs

从子级到父级的跨站点 iframe postMessage