Vue.js 道具未在子组件中呈现

Question

我有两个组件，Login.vue 和 Home.vue。我需要使用 props 将变量从 Login 传递到 Home。

所以，在我的父母中，我使用 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>

我想将error 发送到主页

所以在 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 中呈现，但在 Home.vue 中没有 error

Answer 1

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

检查支柱外壳部分。

您在模板道具名称中使用了 camelCase。由于 HTML 不区分大小写，因此您需要使用 kebab 大小写（连字符分隔）等价物。

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