Javascript VueJS：在可重用组件中使用多个组件

我想创建一个由两个下拉列表组成的可重用组件。对于下拉列表，我使用vue select，我希望能够将两个下拉列表值绑定到一个变量中。到目前为止，我所做的就是：

可重用MultidrodDown.vue

我只是无法将“value”的值绑定到主v模型

下面是我希望如何在父组件上使用

ParentComponent.vue

---

因此，无论何时更改这两个下拉列表中的任何一个，父组件上的我的变量也会更改

我不确定您正在使用这些值绑定做什么，但您应该在数据属性（即selected1和selected2）中发出值，因为它们是通过v-model绑定的

这里有一个例子。我试图简化变量名

Vue.component'v-select'，VueSelect.VueSelect； Vue.组件“rmd”{ 模板：` `, 资料{ 返回{ 月份：， 年份：， 选项：[{ 标签：一， 价值：1 }, { 标签：两个， 价值：2 } ] } }, 计算：{ 蒙特价值{ //从v-select处理可为空的值 返回this.month&&this.month.value }, 年价值{ //从v-select处理可为空的值 返回this.year&&this.year.value } }, 方法：{ 更新{ 此.$emit'input'{ 月份：本月价值， 年份：this.yearValue } } } } 新Vue{ el:“应用程序”， 数据：{ 日期：{月份：1，年份：2017} } } 此v-select组件来自何处？

<template>
    <div class="container">
        <div class="row">
            <div class="input-group">                        
                <div class="col-md-6">                  
                    <v-select
                            placeholder="Dropdown1"
                            :options="options1"                            
                            :value="value.month"
                            ref="dd1"
                            v-model="selected1"
                            @input="update()"></v-select>
                </div>
                <div class="col-md-6">                  
                    <v-select
                            placeholder="Dropdown1"
                            :options="options1"                            
                            :value="value.year"
                            ref="dd2"
                            v-model="selected2"
                            @input="update()"></v-select>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import vSelect from 'vue-select';
    export default {
      props: ['value'],
      components: {         
        'v-select' : vSelect,
      },
      data() {
        return {
            selected1: '',
            selected2: '',
            options1: [
                {
                    label: "one",
                    value: 1
                },
                {
                    label: "two",
                    value: 2
                }
            ]
        }
      },
      methods: {
        update() {
            console.log(selected1);
            console.log(selected2);
          this.$emit('input', {
            month: +this.$refs.dd1.value,
            year: +this.$refs.dd2.value
          })
        }
      }
    }
</script>

<template>
    <div class="container">
        <rmd v-model="date" ></rmd>
    </div>
</template>

<script>
    import ReusableMultiDropDown from '../common/ReusableMultiDropDown.vue'
    export default {
      components: { 
        'rmd': ReusableMultiDropDown
      },

      data() {
        return {
          date: {
            month: 1,
            year: 2017
          }       
        }
      }
    }
</script>