En primer lugar, sé que esta es probablemente una pregunta SÚPER fácil, pero he estado luchando durante una hora y media y ya terminé con eso. El primer proyecto de vue, por lo que nunca he tenido 2 componentes que se comuniquen entre sí, y mucho menos cuando se trata <script setup> .
Cualquier documento relevante que me ayude a entender POR QUÉ esto funciona de esta manera sería maravilloso. Quiero aprender cómo funciona esto, pero mi búsqueda en Google no me lleva a ninguna parte.
Esta aplicación es simple, solo alterna el modo claro y el modo oscuro en algunas tarjetas. Hay más de lo que se muestra a continuación, pero eliminé el código irrelevante (de trabajo) para facilitar la lectura.
Mi código 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>Mi código card.vue:
<script xmlns="http://www.w3.org/1999/html"> export default { data() { return { } }, } </script> <template> <h1 :class="{ 'text-white': darkMode }"> Content! </h1> </template> Hay más complejidad en el proyecto, pero todo lo que estoy tratando de hacer ahora es que hablen. Solo quiero que se agregue la clase en función de si darkMode es true o false en el padre.
Para permitir que el componente card.vue reciba darkMode , debe tener un accesorio (a través de defineProps en <script setup> o la opción props en <script> ). Sin embargo, ha declarado el accesorio darkMode en App.vue cuando en realidad necesita estar en card.vue . También tenga en cuenta que no es necesario importar defineProps , ya que es una macro del compilador que el compilador reemplaza automáticamente:
<!-- App.vue --> <script setup> import { ref } from 'vue' import card from './components/card.vue' const darkMode = ref(false); // ❌ move this to card.vue //const props = defineProps({ // darkMode: Boolean //}) </script> <!-- card.vue --> <script setup> // ✅ card.vue can now receive `darkMode` from parent const props = defineProps({ darkMode: Boolean }) </script> Luego, use la directiva v-bind para vincular el valor de la referencia App.vue de darkMode al accesorio card.vue de darkMode :
<!-- App.vue --> <template> <card :darkMode="darkMode" /> </template>