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

检查支撑套管上的部分。

您正在模板prop名称中使用camelCase。由于HTML不区分大小写，因此您需要使用kebab-cased（连字符分隔）代替。

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

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

1 个答案: