Javascript 将数据从HTTP请求传递到子组件VueJS

我的VueJS（Vue 2）应用程序遇到了一些问题

我有一个登录组件，它有一个名为“error”的子组件，它只是一个引导警报，显示一条应该来自后端（通过HTTP请求）的消息。问题是我不知道如何在HTTP请求后动态填充此消息

因此，重申一下，我有一个父登录组件，它显示了一个登录表单，该组件在它的模板中需要一个“Error”子组件，它只是一个引导警报

我需要根据“登录”组件发出的HTTP请求的响应为该子组件设置一条消息，该组件是我希望消息显示在上的“错误”组件的直接父级

你是通过道具做到这一点的吗？如果是，具体如何？这是我当前登录组件的HTML模板

<template>
    <div class="container-fluid">
        <!-- Error display component -->
        <error v-if="hasError" v-bind:errorMessage='errorMessage'></error>
        ...Login form HTML....
</template>

<script>
    import Error from './partials/Error.vue';

    export default {
        mounted() {
            this.usernameInput  = document.getElementById('email')
            this.passwordInput  = document.getElementById('password')
            this.submitButton   = document.getElementById('submitBtn')
            this.errorContainer = document.getElementById('errorContainer') 
        },
        methods: {
            submitForm: (e) => {
                e.preventDefault();

            }
        },
        data() {
            return {
                usernameInput: undefined,
                passwordInput: undefined,
                submitButton: undefined,
                errorContainer: undefined,
                errorMessage: null,
                hasError: false,
                email: null,
                password: null
            }
        },
        components: {
            'error': Error
        }
    }   
</script>

<template>
    <div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Error!</strong> {{ errorMessage }}
    </div>
</template>

<script>
    export default {
        props: ['']
    }
</script>

…登录表单HTML。。。。
从“./partials/Error.vue”导入错误；
导出默认值{
安装的（）{
this.usernameInput=document.getElementById（'email'）
this.passwordInput=document.getElementById（'password'））
this.submitButton=document.getElementById（'submitBtn'）
this.errorContainer=document.getElementById（'errorContainer'）
},
方法：{
提交形式：（e）=>{
e、 预防默认值（）；
}
},
数据（）{
返回{
usernameInput:未定义，
passwordInput:未定义，
submitButton:未定义，
errorContainer:未定义，
errorMessage:null，
错误：错，
电子邮件：空，
密码：null
}
},
组成部分：{
“错误”：错误
}
}   

对于错误组件

<template>
    <div class="container-fluid">
        <!-- Error display component -->
        <error v-if="hasError" v-bind:errorMessage='errorMessage'></error>
        ...Login form HTML....
</template>

<script>
    import Error from './partials/Error.vue';

    export default {
        mounted() {
            this.usernameInput  = document.getElementById('email')
            this.passwordInput  = document.getElementById('password')
            this.submitButton   = document.getElementById('submitBtn')
            this.errorContainer = document.getElementById('errorContainer') 
        },
        methods: {
            submitForm: (e) => {
                e.preventDefault();

            }
        },
        data() {
            return {
                usernameInput: undefined,
                passwordInput: undefined,
                submitButton: undefined,
                errorContainer: undefined,
                errorMessage: null,
                hasError: false,
                email: null,
                password: null
            }
        },
        components: {
            'error': Error
        }
    }   
</script>

<template>
    <div class="alert alert-danger fade in">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Error!</strong> {{ errorMessage }}
    </div>
</template>

<script>
    export default {
        props: ['']
    }
</script>

错误{{errorMessage}
导出默认值{
道具：['']
}

更新：

适应您的代码：

methods: {
  submitForm(e) { // dont use fat arrow to not loose context
    e.preventDefault();

    if (some_error) {
      this.hasError = true;
      this.errorMessage = 'Please fix ....';
    }
  }
}

和错误组件：

export default {
    props: ['errorMessage']
}

---

您可以这样做：

Vue.component('login', {
  template: '<div>...</div>',
  data() {
    return { message: '' };
  },
  methods: {
    request() {
      // make a request and then set this.message
    }
  }
})

Vue.component('error', {
  template: '<div>{{ message }}</div>',
  props: ['message']
})

Vue.component（'login'{
模板：“…”，
数据（）{
返回{消息：'}；
},
方法：{
请求（）{
//发出请求，然后设置此消息
}
}
})
Vue.component（'错误'{
模板：“{message}}”，
道具：['message']
})

让它工作起来，就像Jonatas Walker在他的帖子中所说的那样，您应该为父登录组件上的错误消息设置一个

数据
变量，然后您应该像这样将其传递给子组件


：errorMessage='errorMessage'
表示我正在将'errorMessage'数据属性作为一个prop（也称为'errorMessage'的属性）v绑定到子项中

然后，在我的子组件的Javascript部分，我可以说

    props: ['errorMessage']

然后我可以在该组件中使用errorMessage，就好像它是该组件中定义的普通数据属性一样

{{ errorMessage }}

举个例子就可以了。
很高兴能帮上忙。