如何在此 Vue 3 应用程序中从孙组件更改布尔变量的值？

Question

我正在开发 Vue 3 应用程序。我有 3 个嵌套组件：一个按钮组件，嵌套在导航组件中，导航组件嵌套在内容组件中。

该按钮应切换 grandparent 组件 Main.vue（内容组件）内的布尔变量 isVisible 的值。

孙组件中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>

在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>

在grandparent组件中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>

问题

如上所示，我尝试向上发射，一次发射一个组件。

由于我无法理解的原因，这不有效。

问题

我的错误在哪里？
最短的可行解是什么？

Answer 1

#1 您没有在 parent Navigation 组件中声明 MyButton 组件。
在 export default {}

中添加

components: {
   MyButton
},

#2 你没有在你的 grand parent Main 组件中收听事件。
将 <Navigation /> 行替换为：

<Navigation @toggleVisibility="toggleVisibility" />

P.S：对于自定义事件，首选 kebab-case。只是一个最佳实践。 toggle-visiblity 而不是 toggleVisibility

如何在此 Vue 3 应用程序中从孙组件更改布尔变量的值？

How do I change a Boolean variable's value from a grandchild component in this Vue 3 application?

javascript

vue.js

vuejs2

vuejs3

问题

问题