Ich entwickle eine Vue 3-Anwendung. Ich habe drei verschachtelte Komponenten: eine Schaltflächenkomponente, verschachtelt in einer Navigationskomponente, die wiederum in einer Inhaltskomponente verschachtelt ist.

Die Schaltfläche sollte den Wert der übergeordneten Komponente umschalten Main.vue（内容组件）内布尔变量 isVisible.

In Sun-Komponente 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>

In der übergeordneten Komponente 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>

In der Großelternkomponente 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>

Frage

Wie oben gezeigt, habe ich versucht, nach oben zu schießen, eine Komponente nach der anderen.

Aus Gründen, die ich nicht verstehen kann, funktioniert das nicht.

Frage

1. Wo ist mein Fehler?
2. Was ist die kürzestmögliche Lösung?