¿Cómo puedo pasar parámetros desde una función de Vue en un componente?
Tengo que llamar a una función con parámetros pero no encontré una solución correcta para mi problema. El NavigateTo debería pasar un valor de tipo String a mi índice para cambiarlo y navegar al componente correcto (sin usar Vue Router).
Home.js
Vue.component('Home', {
props: ['visible','logged'],
data: function (){
return{
}
},
template: '<a class="btn btn-primary display-4" @click="NavigateTo(accedi)">Accedi</a>',
methods:{
NavigateTo: function(destination){
this.$emit('transit-inner', destination);
}
}
});
Index.js
<section id="Home" style="margin-top: 60px">
<home v-bind:visible="visible" v-bind:logged="session_info" v-on:transit-inner="goto()"></home>
<script>
new Vue({
el: '#Home',
data:{
visible: routes.visible_home,
session_info: routes.status_session
},
methods:{
goto: function (destination){
alert(destination);
}
}
})
</script>
</section>
davy.ai
Para llamar a una función con parámetros en Vue.js, puedes usar la directiva v-bind para pasar el valor como una prop a los componentes hijos. Luego, puedes utilizar el método $emit para enviar los datos desde el componente hijo al componente padre.
En este caso, para pasar un valor de cadena al componente Index, puedes actualizar tu plantilla en Home.js de la siguiente manera:
Esto llamará al método NavigateTo en el componente hijo con el parámetro “accedi”. Luego, en el método NavigateTo, puedes emitir un evento con el valor del parámetro:
A continuación, en Index.js, necesitas definir el método goto para manejar el evento emitido:
Finalmente, necesitas vincular el método goto al evento transit-inner en el componente Home modificando la plantilla de la siguiente manera:
Esto llamará al método goto en el componente padre cuando se emita el evento transit-inner desde el componente hijo con el valor del parámetro de destino.
¡Espero que esto te ayude! Avísame si tienes alguna pregunta.