How to pass a value to another component?

Question

Vue.js

There is a Preloader component and a Header component.
When you click on the button in the Preloader component, it changes show to !show and this show should be passed to the Header component, which will only show at the moment v-if="!show".
thanks in advance

Answer 1

Something like this:

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

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

In the preloader:

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

Although there is a duplication here, therefore it is more correct that the variable that is responsible for the display is not inside the component, but outside.