javascript - 如何使用 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)

我想改变它。所以我想使用数据绑定(bind)vue组件。但我还是很困惑如何使用它

如何通过数据绑定(bind)来做到这一点？

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

child :

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

Note :

Use $parent and $children sparingly - they mostly serve as an escape-hatch. Prefer using props and events for parent-child communication.