如何使用 vue.js 在下拉列表中获取选定值？

Question

我有这样的父组件vue：

<template>
    <form>
        <div class="row">
            <div class="col-md-4">
                <form-select id="color" name="color" :data="color">Color</form-select>
            </div>
            <div class="col-md-4">
                <form-select id="size" name="size" :data="size">Size</form-select>
            </div>
        </div>
        ...
        <a href="javascript:" class="btn btn-danger" @click="add">
            Add
        </a>
    </form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            }
        }
    }
</script>

我有这样的子组件vue：

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        }
    }
</script>

如果我单击添加按钮，我会成功选择值。 但它仍然使用 javascript (document.getElementById)

我想改变它。 所以我想使用数据绑定vue组件。 但我仍然对使用它感到困惑

如何使用数据绑定来做到这一点？

Answer 1

您需要从子组件发出事件以发送数据并使用 on 方法在父组件中获取该数据：

家长：

<form-select id="color" name="color" :data="color" v-on:triggerChange="changeColor">Color</form-select>

methods: {
 // ...
 changeColor(selected) {
   // do what you want to do with selected
 }
 // ...
}

孩子：

<select :id="id" :name="name" class="form-control" v-model="selected" v-on:change="applyColor">

methods: {
 // ...
 applyColor() {
   this.$emit('triggerChange',this.selected);
 }
 // ...
}

---

根据您的评论，您可以这样做：

this.$parent.$options.methods.someParentMethod(data)

注意：

谨慎使用 $parent 和 $children - 它们主要用作逃生舱口。 更喜欢使用道具和事件进行父子通信。

Answer 2

当您开发新事物时，一切似乎都是正确的。 以上答案完全正确，感谢及时提供的答案。

发布此答案以更详细地描述答案。 在 Vue 中开发应用程序时，您必须了解一些事情，例如。

A. 父子组件之间的通信

B. 非亲子沟通

A. 父子组件之间的通信

• 让我们了解父子组件之间的通信。 我已经分解成几个步骤需要记住的几件事

i) 将一些方法 X 与父级绑定，以便该方法可以侦听子级发出的消息

ii) 在子组件中添加 props 属性以绑定子组件中的数据

iii) this.$emit 与父组件绑定的相同消息 (X)。

父组件

<template>
<form>
    <div class="row">
        <div class="col-md-4">
            <form-select id="color" name="color" (dropdownChanged)= 'colorChanged' :data="color">Color</form-select>
        </div>
        <div class="col-md-4">
            <form-select id="size" name="size" :data="size" (dropdownChanged)= 'sizeChanged'>Size</form-select>
        </div>
    </div>
    ...
    <a href="javascript:" class="btn btn-danger" @click="add">
        Add
    </a>
</form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            },
            colorChanged(color) {
               console.log('Color Changed', color);
            },
            sizeChanged(size) {
               console.log('size Changed', color);
            },
        }
    }
</script>

子组件

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select (change)='dropdownChanged' :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        },
       methods: {
         dropdownChanged() {
           this.$emit('changesOccured',this.selected)
         }
       }
    }
</script>

B. 非亲子沟通

有时两个组件可能需要相互通信，但它们不是彼此的父/子。 在简单的场景中，你可以使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

参考 - https://v2.vuejs.org/v2/guide/components.html