Vue.js prop не отображается в дочернем компоненте

Question

У меня есть два компонента, Login.vue и Home.vue.Мне нужно передать переменную из входа в систему с помощью реквизита.

Итак, в моем родителе Login.vue я использую

<template>
  <b-nav-form @submit.prevent="login">
      <home :error='error'></home>
      ...
  </b-nav-form>
</template>

и

<script>
import Home from './Home'
export default {
  name: 'Login',
  components: {
    home: Home
  },
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    login () {
        // not interesting
    },
    loginSuccessful (req) {
      //not interesting too
    },
    loginFailed (req) {

      this.error = 'LOGIN ERROR'

    }
  }
}
</script>

Iхочу отправить error в Home

, поэтому в Home.vue

<template>
     <header class="container-home">
<div class="container h-100">
    <span>This is the HOME</span>
    <span> {{error}}</span>
</div>
     </header>
</template>
<script>
export default {
  name: 'home',
  props: ['error']
}

</script>

error отображается в Login.vue, но не error в Home.vue

Answer 1

https://vuejs.org/v2/guide/components-props.html

Проверьте раздел на корпусе винта.

Вы используете camelCase в имени шаблона. Поскольку HTML не чувствителен к регистру, вам нужно вместо этого использовать эквивалент в кебабе (через дефис).

<home :error-message="error"></home>