Bagaimanakah saya boleh menukar nilai pembolehubah boolean dalam komponen cucu dalam aplikasi Vue 3 ini?
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
- Di mana silap saya?
- Apakah penyelesaian yang paling singkat?
