Tengo una configuración de aplicación vue así:
import { createApp } from 'vue'; import RecommendedJobsWidget from './RecommendedJobsWidget.vue' createApp(RecommendedJobsWidget).mount("#recommendedJobsWidgetInstance");Mi HTML es así:
<body> <div id="recommendedJobsWidgetInstance"> <recommended-jobs-widget :message="'messagehere'"></recommended-jobs-widget> </div> <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script> </body> Mi aplicación se está cargando como esperaba, pero dentro del componente <recommended-jobs-widget> intento enviar un message de utilería. Dentro de mi componente estoy aceptando el apoyo:
props: ['message']pero cuando trato de acceder al accesorio dentro de mi componente, no existe. He probado varias soluciones y ninguno de mis datos se pasa nunca como accesorio.
Cualquier ayuda sería muy apreciada.
Que yo sepa, no hay forma de pasar datos a través de accesorios a los componentes raíz en VueJS 3.
El componente raíz se renderiza automáticamente dentro del contenedor <div> montado (y elimina cualquier cosa que esté dentro de él), por lo que descubrirá que con solo escribir lo siguiente seguirá renderizando su componente raíz (a menos que su componente raíz no tenga una <template> ):
<body> <div id="recommendedJobsWidgetInstance"></div> <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script> </body>Necesito exactamente lo mismo (pasar datos a los componentes de Vue), y el más cercano que he encontrado (después de horas de buscar en Google y leer documentación) es este: Pasar datos del archivo html a la aplicación vue registrada
No podría acceder a eso usando accesorios, pero podría obtener el valor de ese atributo usando algún DOM de Vanilla js como document.getElementById ("app"). getAttribute ("someVariable")
Esto significaría para su caso :
<body> <div id="recommendedJobsWidgetInstance" message="messagehere"></div> <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script> </body> Y luego, dentro de su componente RecommendedJobWidget.vue :
<template> <div> <!-- your HTML --> </div> </template> <script> export default { name: "RecommendedJobWidget", data() { return { message: "" } }, mounted() { this.message = document.getElementById("recommendedJobsWidgetInstance").getAttribute("message"); } } </script>Si hay una mejor manera, me encantaría saberlo, ya que no estoy muy contento de que Vue3 parezca estar diseñado solo para SPA.