Bagaimanakah saya boleh menukar nilai pembolehubah boolean dalam komponen cucu dalam aplikasi Vue 3 ini?

Question

Saya sedang membangunkan aplikasi Vue 3. Saya mempunyai 3 komponen bersarang: komponen butang, bersarang di dalam komponen navigasi, yang bersarang di dalam komponen kandungan.

Butang harus menogol nilai komponen datuk nenek Main.vue（内容组件）内布尔变量 isVisible.

Komponen Dalam Matahari 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>

Dalam komponen induk 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>

Dalam komponen datuk nenek 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>

Soalan

Seperti yang ditunjukkan di atas, saya cuba menembak ke atas, satu komponen pada satu masa.

Atas sebab yang saya tidak faham, ini tidak berkesan.

Soalan

1. Di mana silap saya?
2. Apakah penyelesaian yang paling singkat?

Answer 1

#1 Anda tidak mempunyai komponen Navigation 组件中声明 MyButton ibu bapa.
Tambahkan pada export 默认 {}

components: {
   MyButton
},

#2 Anda tidak mendengar acara dalam komponen Main datuk nenek anda.
Gantikan baris <Navigation /> dengan:

P.S: Untuk acara tersuai, lebih suka menggunakan kebab-case。只是一个最佳实践。 toggle-visiblity 而不是 toggleVisibility