Vue.js Vue–将变量从子模板传递到App.Vue

我阅读了有关使用$emit将变量从子对象传递到父对象的内容，但我还不能完全理解它

在App.vue中，我有一个用于页面标题的组件，其中包含一个控制移动导航可见性的按钮。单击可更改其类：

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

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">

---

使用vuex，或使header成为一个有自己事件总线的插件，或传递一个全局：state=state属性，该属性周围有header.isOpen属性，或向header添加一个ref并通过该属性访问。$refs.header，或全局事件总线，或从该属性向上遍历到$root，然后遍历到header组件，有几种方法！谢谢你的回答，它让我走上了正确的道路。不知何故，我还必须在子模板内的导出默认值中设置emits:[sendnavigationstatus]。总之，祝你新年快乐！嗨，Anna，我不知道emits属性是必需的，我试图在Vue文档中查找它，但找不到它。你能给我指一下正确的方向吗？也祝你新年快乐。谢谢，学到了一些东西！我正在使用Vue 2，这就是我错过它的原因！有一个局部变量let isOpen，Vue不知道它的存在。我会将isOpen添加到数据函数中，在navigationStatus中，用this.isOpen替换局部变量isOpen。这应该是可行的，至少在VUE2中，我知道会的；-。如果将Vue3 composition api与这些ref类型一起使用，请看这里：关于动态类名，您需要注意的另一件事是：class='{someClass:isOpen}'或：class='dynamic string'+isOpen'打开“：”

<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">