Estoy trabajando con BootstrapVue .
Necesito emit un valor a mi parent.vue , pero mi línea de código this.$emit('info', this.hide); no funciona
Si console.log(this.hide) obtengo mi valor correcto en este caso falso , de lo contrario, si mi if-statement es correcta, lo obtengo verdadero .
¿Cuál es el error aquí?
guión de mi child.vue:
data(){ return { hide: true, } } mounted() { if (statement) { if(some statement) { //do something } else { this.hide = false; console.log(this.hide); //HERE I GET CORRECT VALUE this.$emit('info', this.hide); //THIS DOESNT WORK } } }Cómo debería funcionar en mi parent.vue:
<template> <div @info="info"> <div> //THIS DIV SHOULD BE SHOWN IF this.hide = false </div> <div> //THIS DIV SHOULD BE SHOWN IF this.hide = true </div> </div> </template>Idealmente en App.vue (Parent)
deberías tener algo como
<login @info="someHandler"></login>no hay necesidad de optar por un componente secundario si solo lo va a usar para administrar algo de lógica. Es apropiado solo si tiene algún contenido en la plantilla. También colocando el controlador de emisión en algún div. Así no es como funciona emit
A continuación se muestra un ejemplo de trabajo simple
App.vue (padre)
<template> <h1>{{ title }}</h1> <Child @changeTitle="ChangeT($event)" /> </template> <script> import Child from "./components/Child" export default{ name:'App', components: { Child, }, data() { return{ title:'Rick Grimes' } }, methods:{ ChangeT(title) { this.title=title; }, } </script> <style></style>niño.vue
<template lang="html"> <button type="button" @click='passEvent'> Update me</button> </template> <script> export default { name:'Child', methods:{ passEvent() { this.$emit('changeTitle','Awesome ') } } } </script> <style lang="css" scoped> </style>Prueba algo como el siguiente fragmento:
Vue.component('Child', { template: ` <div class=""> child <button @click="changeHide">change hide</button> </div> `, data(){ return { hide: true, } }, methods: { changeHide() { this.hide = !this.hide this.sendInfo() }, sendInfo() { this.$emit('info', this.hide); } }, mounted() { //if (statement) { //if(some statement) { //do something //} else { this.hide = false; this.sendInfo() //} } }) new Vue({ el: '#demo', data(){ return { info: null, } }, methods: { setInfo(val) { this.info = val } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-if="!info"> //THIS DIV SHOULD BE SHOWN IF this.hide = false </div> <div v-if="info"> //THIS DIV SHOULD BE SHOWN IF this.hide = true </div> <p>from child info is: {{ info }}</p> <Child @info="setInfo" /> </div>