如何更改此 Vue 3 应用程序中孙组件中的布尔变量值？

Question

我正在开发一个Vue 3应用程序。我有 3 个嵌套组件：一个按钮组件，嵌套在导航组件内，导航组件嵌套在内容组件内。

该按钮应切换祖父组件 Main.vue（内容组件）内布尔变量 isVisible 的值。

在孙组件MyButton.vue中：

<template>
  <button @click="handleClick" class="btn btn-sm btn-success">
    {{ label }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    label: String,
    isVisible: Boolean
  },

  emits: [
    'toggleVisibility',
],
  
   methods: {
    handleClick() {
      this.$emit('toggleVisibility')
    }
  }
}
</script>

在父组件Navigation.vue中：

<template>
    <div class="navigation">
        <MyButton 
            :label='"Toggle content"' 
            :isVisible=false 
            @toggleVisibility="$emit('toggleVisibility')"
        />
    </div>
</template>

<script>
    import MyButton from './MyButton'

    export default {
       emits: [
        'toggleVisibility',
       ],
    }
</script>

在祖父母组件Main.vue中：

<template>
  <div class="main">
    <Navigation />

    <div v-if="isVisible" class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>

</template>

<script>
import Navigation from './Ui/Navigation'

export default {
  name: 'Main',
  components: {
        Navigation
    },
  props: {
    title: String,
    tagline: String,
  },
  
  data() {
    return {
      isVisible: false,
    }
  },
  
  methods: {
    toggleVisibility() {
        console.log('ok');
        this.isVisible = !this.isVisible;
    }
  }
}
</script>

问题

如上所示，我尝试向上发射，一次一个组件。

由于我无法理解的原因，这不起作用。

问题

1. 我的错误在哪里？
2. 最短的可行解决方案是什么？

Answer 1

#1 您没有在父级 Navigation 组件中声明 MyButton 组件。
将其添加到 export 默认 {}

中

components: {
   MyButton
},

#2 您没有监听祖父母 Main 组件中的事件。
将 <Navigation /> 行替换为：

P.S: 对于自定义事件，更喜欢使用 kebab-case。只是一个最佳实践。 toggle-visiblity 而不是 toggleVisibility