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)

Note：

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

Answer 2

当你开发新东西时，一切似乎都是正确的。以上答案是完全正确的，并且及时了解答案。

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

一个。父母和子组件之间的通信

B中。非亲子沟通

：一种。父母和子组件之间的通信 - 让我们了解父组件和子组件之间的通信。我已经分解成几个要记住的事情

i）将一些方法X绑定到父级，以便该方法可以监听子级

发出的消息

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

iii）this。$发出与父组件绑定相同的消息（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://vuejs.org/v2/guide/components.html

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

2 个答案: