在 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時，您實際上是在“發送”一個value道具並“期待”一個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>