Question

如何将输入到Name和Adres输入中的值传递给父Vue？

父母（App.vue）：

<form-group-input-text
        :label="'test'"
        :labelvalue="'Name'"
        :inputplaceholder="'Name'"
        :inputname="'Name'"
        :inputvalue="''"
        :inputclassname="''"
        :inputid="'Name'"
        :validation="'required|min:3|max:5'">
</form-group-input-text>

<form-group-input-text
        :label="'testt'"
        :labelvalue="'Adres'"
        :inputplaceholder="'adres'"
        :inputname="'adres'"
        :inputvalue="''"
        :inputclassname="''"
        :inputid="'adres'"
        :validation="'required'">
</form-group-input-text>

孩子：

<form-label
        :label="inputid"
        :labelvalue="labelvalue">
</form-label>

<form-error :inputname="inputname"></form-error>

<form-input-text
        v-on:input="handleTitle"
        :validation="validation"
        :inputplaceholder="inputplaceholder"
        :inputname="inputname"
        :inputvalue="inputvalue"
        :inputclassname="inputclassname"
        :inputid="inputid">
</form-input-text>
import Error from '../../form/validation/Error.vue'
import Label from '../../form/Label.vue'
import Input from '../../form/InputText.vue'

export default {
    data: function () {
        return {
            inputvalue: ''
        }
    },
    components: {
        'form-label': Label,
        'form-input-text': Input,
        'form-error': Error
    },
    props: {
        label: String,
        labelvalue: String,
        inputplaceholder: String,
        inputname: String,
        inputclassname: String,
        inputid: String,
        validation: String
    },
    methods: {
        handleTitle: function (evt) {
            this.inputvalue = evt.target.value
        },
    }

}

孩子中的孩子：

<input type="text"
       v-on:input="updateValue($event)"
       v-validate="validation"
       :placeholder="inputplaceholder"
       :name="inputname"
       :value="inputvalue"
       :class="{
                    'form-control':'form-control',
                    'alert alert-danger': errors.has(inputname),
                    'alert alert-success': $validator.fields.find({ name: inputname })
                        && $validator.fields.find({ name: inputname }).flags.dirty
                        && !errors.has(inputname)
                }"
       :id="inputid"
>

<script>
    export default {
        inject: ['$validator'],
        props: {
            inputplaceholder: String,
            inputname: String,
            inputvalue: String,
            inputclassname: String,
            inputid: String,
            validation: String
        },
        methods: {
            updateValue: function (evt) {
                this.$emit('input', evt)
            }
        }
    }
</script>

Answer 1

常见的方法是使用emit()将事件调度到父组件。

https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

您也可以将其与v模型一起使用https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Vue.js将输入数据从子子子组件传递到父子组件

1 个答案: