Как передать значение в другой компонент?

Question

[myskypesla]

Есть компонент Preloader и компонент Header.

При нажатии на кнопку в компоненте Preloader, у него меняется show на !show и этот show должен передаться в компонент Header, который покажется только в момент v-if="!show".

Спасибо заранее

Answer 1

[Evgeny Kulakov]

Как-то так:

<template>
  <preloader @show="show = $event"></preloader>
  <header v-if="!show"></header>
</template>

export default {
  data() {
    return {
      show: true
    }
  }
}

В прелоадере:

<template>
  <button @click="handler"></button>
</template>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    handler() {
      this.show = !this.show
      this.$emit('show', this.show)
    }
  }
}

Хотя тут на лицо дублирование, поэтому правильнее, чтобы переменная, которая отвечает за отображение была не внутри компонента, а снаружи.