Vuejs将输入数据从子子子组件传递给父组件答案

【问题标题】：Vuejs pass input data from sub sub child component to parentVuejs将输入数据从子子子组件传递给父组件
【发布时间】：2019-01-07 23:58:54
【问题描述】：

如何将输入到 Name 和 Adres 输入的值传递给 Parent 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>

【问题讨论】：

你能继续传播事件吗？
@zero298 是什么意思？
我的意思是哈苏的回答试图摆出什么姿势。让孙子发射给孩子，让孩子发射给祖父母。
查看我的更新代码@zero298

标签： vue.js

【解决方案1】：

常见的方式是使用emit()向父组件派发事件。

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

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

【讨论】：

您应该展示解决方案，而不是链接到外部站点。链接会随着时间而改变。
我有一个从孩子到孩子的发射
您仍然可以将其传播到父级。您的代码示例很小，我们不知道您在 updateValue 方法中做了什么。但是，如果您想在父组件上使用 v-model，您可以在两个输入上使用 v-on:input="$emit('input', $event.target.value)"。
@HasuKimchi 查看我的更新代码，我该如何实现？抱歉，我有两个输入字段
您是否尝试过在您的 handleTitle 方法中再次发出该值？它应该确实有效。