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?