Vue 3：如何将布尔数据从父级（使用 <script setup>）获取到子级？

Question

首先，我知道这可能是一个超级简单的问题，但我已经挣扎了一个半小时，我已经完成了。有史以来第一个 vue 项目，所以我从来没有让 2 个组件相互通信，更不用说何时<script setup>涉及了。

任何帮助我理解为什么会这样工作的相关文档都会很棒。我想了解这是如何工作的，但我的谷歌搜索一无所获。

这个应用程序很简单，它只是在某些卡上切换浅色模式和深色模式。它的内容比下面的内容更多，但为了便于阅读，我已经删除了不相关的（工作）代码。

我的App.vue代码：

<script setup>
import {ref, defineProps} from "vue";
import card from './components/card.vue'

const darkMode = ref(false);

const props = defineProps({
  darkMode: Boolean
})
</script>

<template>
// Bunch of stuff that is irrelevant to the scope of this problem, it works just fine. 
</template>

我的card.vue代码：

<script xmlns="http://www.w3.org/1999/html">
export default {
  data() {
    return {
      
    }
  },
}
</script>

<template>
  <h1 :class="{ 'text-white': darkMode }"> Content! </h1>
</template>

这个项目更加复杂，但我现在要做的就是让他们谈谈。darkMode我只想根据是否true在false父级中添加该类。

Answer 1

为了使card.vue组件能够接收darkMode，它需要有一个 prop （通过definePropsin<script setup>或中的props选项<script>）。然而，当它实际上需要在 中时，您已经声明了该darkMode道具。另请注意，无需 import ，因为它是一个编译器宏，会自动被编译器替换：App.vuecard.vuedefineProps

\n

<!-- App.vue -->\n<script setup>\nimport { ref } from \'vue\'\nimport card from \'./components/card.vue\'\n\nconst darkMode = ref(false);\n\n// \xe2\x9d\x8c move this to card.vue\n//const props = defineProps({\n//  darkMode: Boolean\n//})\n</script>\n

\n

<!-- card.vue -->\n<script setup>\n// \xe2\x9c\x85 card.vue can now receive `darkMode` from parent\nconst props = defineProps({\n  darkMode: Boolean\n})\n</script>\n

\n

然后，使用v-bind指令App.vue将\'s ref的值绑定darkMode到card.vue\'s darkModeprop：

\n

<!-- App.vue -->\n<template>\n  <card :darkMode="darkMode" />\n</template>\n

\n

演示

\n