Quiero pasar el objeto de datos reactivos al niño, pero la aplicación muestra una página en blanco sin ningún tipo de mensaje de error. Quiero usar la api de composición.
Padre:
<template> <Landscape :viewData="viewData"/> </template> <script> import { onMounted, onUnmounted, ref, inject } from 'vue'; export default { name: 'App', setup() { const resizeView = ref(false) const mobileView = ref(false) const viewData = reactive({resizeView, mobileView}) viewData.resizeView.value = false viewData.mobileView.value = false // lets do sth to change viewData return { viewData } }, components: { Landscape } } </script>Niño:
<template>resize- {{viewData.resizeView}} mob {{viewData.mobileView}} </template> <script> export default { name: 'Header', props: { viewData: Object, }, setup() { return { } } } </script>todo funciona, cuando está en padre, el objeto de datos se pasa directamente así
<Landscape :viewData="{resizeView: false, mobileView: false}"/>De acuerdo con los documentos de Vue sobre objetos reactive :
La conversión reactiva es "profunda", afecta a todas las propiedades anidadas.
Por lo tanto, no necesita envolver cada variable como una ref en un objeto reactive (a menos que desee desenvolver la variable de referencia). Consulte los documentos de Vue para obtener más información sobre la API de reactividad en Vue.
Proporcioné algunos usos básicos de ref y reactive con su componente Landscape . Pegue esto en su App.vue :
<template> <button @Click="changeResize" type="button">Change ref values</button> <Landscape :viewData="viewData" /> <br /> <br /> <button @Click="changeReactiveSize" type="button"> Change reactive values </button> <Landscape :viewData="otherViewData" /> </template> <script> import { onMounted, onUnmounted, ref, inject } from 'vue'; export default { name: 'App', setup() { const resizeView = ref(false); const mobileView = ref(false); const viewData = { resizeView, mobileView, }; const changeResize = () => { viewData.resizeView.value = !viewData.resizeView.value; viewData.mobileView.value = !viewData.mobileView.value; }; const otherViewData = reactive({ mobileView: false, resizeView: false, }); const changeReactiveSize = () => { otherViewData.resizeView = !otherViewData.resizeView; otherViewData.mobileView = !otherViewData.mobileView; }; return { viewData, otherViewData, changeResize, changeReactiveSize, }; }, components: { Landscape } }También puede consultar este ejemplo de código en stackblitz .