Блог

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

Итак, в моем родительском 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, но нет error в Home.vue

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

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

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

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