我正在開發一個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. 最短的可行解決方案是什麼？