在 vue 组件上提交表单时如何获取值？

Question

我有两个组件

我的第一个组件是这样的：

<template>
    <div>
        ...
            <form-input id="name" name="name" v-model="name">Name</form-input>
        ...
        <button type="submit" class="btn btn-primary" @click="submit">Submit</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: null
            }
        },
        methods: {
            submit() {
                console.log('submit profile')
                console.log(this.name)
            }
        }
    }
</script>

在第一个组件上，会调用表单输入组件

表单输入组件是这样的：

<template>
    <div class="form-group">
        <label :for="id" class="col-sm-3 control-label"><slot></slot></label>
        <div class="col-sm-9">
            <input :type="type" :name="name" :id="id" class="form-control">
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            'id': String,
            'name': String,
            'type': {
                type: String,
                default() {
                    if(this.type == 'number')
                        return 'number'
                    return 'text'
                }
            },
        }
    }
</script>

我就是这样使用模式的。所以表单输入组件可以在很多组件中使用

但我的问题是：提交按钮时无法检索值

我这样试，但是console.log(this.name)的结果是null

我想在输入数据名称和提交表单时，它会得到名称

我该如何解决这个问题？

Answer 1

来自官方文档Form Input Components using Custom Events:

知道父类中的v-model等同于：

<child-component
   v-bind:value="something"
   v-on:input="something = $event.target.value">

所以当使用 v-model 你实际上是 "sending" 一个 value 道具和 "expecting" 一个 input 事件。

要做到这一点，那么，在子组件中执行：

声明道具value
将 <input> 更改为 :value 上面声明的 value 道具
更改 <input> 以在更改值时向其父级发出 input 事件

最终模板：

<template>
    <div class="form-group">
        <label :for="id" class="col-sm-3 control-label"><slot></slot></label>
        <div class="col-sm-9">
            <input :type="type" :name="name" :id="id" class="form-control" :value="value" @input="$emit('input', $event.target.value)">
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            'id': String,
            'name': String,
            'type': {
                type: String,
                default() {
                    if(this.type == 'number')
                        return 'number'
                    return 'text'
                }
            },
            'value': String,
        }
    }
</script>

在 vue 组件上提交表单时如何获取值？

How can I get value when submit form on the vue component?

javascript

vue.js

vuejs2

vue-component

vuex