Блог

Я прочитал о передаче переменных от дочернего к родительскому, используя $emit , но я пока не могу полностью понять это.

В App.vue у меня есть <header/> компонент для заголовка страницы, содержащий кнопку, которая управляет видимостью мобильной навигации. При нажатии он меняет свой класс:

 <button @click="toggleMobileNavigation" :class="isOpen ? 'is-open' : 'is-closed'">
 

Это <header/> js:

 export default {
  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    toggleMobileNavigation() {
      if(!this.isOpen) {
        this.isOpen = true;
      } else {
        this.isOpen = false;
      }
      this.$emit(this.isOpen)
    }
  }
}
 

App.vue:

 <Header />
<main id="main" tabindex="-1" class="main" :class="isOpen">
 

Очевидно, что это не работает, и я не могу понять, как правильно перехватить $emit .

Спасибо за любые советы!

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

Но вместо того, чтобы делать это в вашем компоненте заголовка:

       this.$emit(this.isOpen)
 

Укажите имя события:

       this.$emit('opened', this.isOpen)
      // or:
      if (this.isOpen) { 
          this.$emit('opened');
      } else {
          this.$emit('closed');
      }
 

Способ, которым вы перехватываете это событие в родительском компоненте (App.vue), должен быть:

 <Header @opened="handleOpenedEvent">  // will call method handleOpenedEvent
// alternatively:
<Header @opened="menuStatus = $event"> // $event contains data you supply as second argument to your this.$emit(name, ...) call

// @[eventname] is one way of doing it, v-on is the same:
<Header v-on:opened="handleEvent">