Chicos, lo siento, si es una pregunta volcada, estoy aprendiendo VUE3 y antes de publicar esta pregunta busqué en Google y no encontré el resultado.
Quiero definir una propiedad global en el componente raíz que se usará en todas las propiedades secundarias. Propiedad como enlace BASE_URL o TITLE.
Aquí está mi componente raíz
<script> import HeaderTop from './pages/partials/header_top.vue' import HeaderMiddle from './pages/partials/header_middle.vue' import MainNavbar from './pages/partials/main_navbar.vue' import MainFooter from './pages/partials/footer.vue' export default { data() { return { show: true, baseURL: 'www.example.com' } }, mounted() { this.show = true; }, components: { HeaderTop, HeaderMiddle, MainNavbar, MainFooter } } </script> <template>...</template>Componente HeaderMiddle.vue
Aquí quiero llamar a la propiedad de RootComponent
<script> import app from '../../RootComponent.vue'; export default { // i also try this ant this not work data() { return { baseURL: app.baseURL } } } </script> <template> <div class="container-fluid"> <div class="row text-center align-items-center height-150"> <div class="col-xs-12 col-sm-12 col-lg-2"> <div class="logo"> <a href="/" title=""> <h1>{{baseURL}}</h1> <!-- not work --> <h1>{{app.baseURL}}</h1> <!-- not work --> <h1>{{app.baseURL}}</h1> <!-- not work --> </a> </div> </div> </div> </div> </template>Aplicación.js
require('./bootstrap'); import { createApp } from 'vue'; import router from './router' import RootComponent from './RootComponent.vue' const app = createApp(RootComponent); app.use(router).mount("#app");Se recomienda proporcionar baseUrl como propiedad global :
require('./bootstrap'); import { createApp } from 'vue'; import router from './router' import RootComponent from './RootComponent.vue' const app = createApp(RootComponent); app.config.globalProperties.baseUrl='www.example.com' app.use(router).mount("#app");y utilícelo dentro de cualquier componente secundario como:
<script> export default { data() { return { baseURL: this.baseURL } } } </script> <template> <div class="container-fluid"> <div class="row text-center align-items-center height-150"> <div class="col-xs-12 col-sm-12 col-lg-2"> <div class="logo"> <a href="/" title=""> <h1>{{baseURL}}</h1> </a> </div> </div> </div> </div> </template>Por lo general, cuando necesitamos pasar datos del componente principal a un componente secundario, usamos accesorios. Sin embargo, imagine el caso en el que tenemos un árbol de componentes grande y un componente profundamente anidado necesita algo de un componente ancestral lejano. Con solo accesorios, tendríamos que pasar el mismo accesorio a través de toda la cadena principal. Pero podemos usar la perforación Props para deepchild.
Puntales de perforación con provide e inject .
**PROVIDE** : un componente principal puede servir como proveedor de dependencias para todos sus descendientes
Ejemplo Proporcionar:
export default { provide: { message: 'hello!' } }Ejemplo de inyección:
export default { inject: ['message'], created() { console.log(this.message) // injected value } }Puedes consultar más detalles desde aquí