Comment modifier la valeur d'une variable booléenne dans un composant petit-enfant dans cette application Vue 3 ?

Question

Je développe une application Vue 3. J'ai 3 composants imbriqués : un composant bouton, imbriqué dans un composant de navigation, qui est imbriqué dans un composant de contenu.

Le bouton doit basculer la valeur du composant grand-parent Main.vue（内容组件）内布尔变量 isVisible.

Dans la composante Soleil 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>

Dans le composant parent 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>

Dans le volet grands-parents 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>

Question

Comme indiqué ci-dessus, j'ai essayé de tirer vers le haut, un composant à la fois.

Pour des raisons que je ne comprends pas, cela ne fonctionne pas.

Question

1. Où est mon erreur ?
2. Quelle est la solution la plus courte possible ?

Answer 1

#1 Vous n'avez pas de composant parent Navigation 组件中声明 MyButton.
Ajoutez-le à export 默认 {}

components: {
   MyButton
},

#2 Vous n'écoutez pas les événements dans votre composant grand-parent Main.
Remplacez la ligne <Navigation /> par :

P.S : Pour les événements personnalisés, préférez utiliser kebab-case。只是一个最佳实践。 toggle-visiblity 而不是 toggleVisibility