Wie ändere ich den Wert einer booleschen Variablen in einer Enkelkomponente in dieser Vue 3-Anwendung?

Question

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?

Answer 1

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

中

components: {
   MyButton
},

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

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