He usado Vue en el pasado, pero tengo problemas para pasar información/argumentos a un componente raíz de Vue 3. En mi html, me gustaría tener algo como esto:
<div class="nav-app" nav="some-nav-jht"></div> donde en mi mounted() , podría acceder a la nav a través de algo como esto:
mounted(){ console.log('here is nav: ' + this.nav);¿Cómo haría esto? Estoy haciendo esto cargando Vue fuera de CDN (sin paquete web, etc.).
Como se señaló en los comentarios, las referencias de plantilla permiten acceder a un elemento desde <script> .
Aplique el atributo ref al elemento con un nombre (por ejemplo, "navapp" ):
<div id="app"> 👇 <div class="nav-app" nav="some-nav-jht" ref="navapp">⋯</div> </div> Luego, en su gancho mounted , acceda a la referencia a través this.$refs.REFNAME :
<script> Vue.createApp({ mounted() { const navapp = this.$refs.navapp console.log('here is nav: ' + navapp.getAttribute('nav')) } }).mount('#app') </script> Vue.createApp({ mounted() { const navapp = this.$refs.navapp console.log('here is nav: ' + navapp.getAttribute('nav')) } }).mount('#app') <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script> <div id="app"> <div ref="navapp" nav="some-nav-jht">Hello world</div> </div>