Hello guys, I came up with another special tutorial in Vue JS. Anyways, before I’m gonna talk about the thing, I need to say I’m not an expert in Vue. However, learning Vue Js by doing it. As a good learner, I always find some different kinds of issues.

This is another issue that I worked on about 6 hours or 7 hours to solve. Sometimes you can think, I shouldn’t take much time to find it, but yes I took my time. With that research, I didn’t find solutions not only for this issue but also I learned about props, events, mixins, components, plugins, etc.

Anyways, I made two components as header.vue and signinmodal.vue. My purpose was to connect signinmodal with the header. However, the only thing I had to do was to change the boolean from false to true when the button clicked.  I tried with props but it didn’t work.

However, because of my luckiness (I don’t believe in it), I could find the following method. you can try it by yourself. I’m not going to say how to import signinmodal component to the header component and basic stuff. Just search on google and you will find it. anyways, the following code will solve your problem.

// component header emits an event
export default {
name: 'header',
methods: {
signinModal () {
this.$root.$emit('signinModal', true);
}
}
// component signinmodal catch your event
export default {
name: 'signinmodal',
data () {
return {
modal: false,
}
},
mounted: function () {
this.$root.$on('signinModal', (text) => { // here you need to use the arrow function
this.modal = text;
})
}
}

That’s all guys. If you can find this way, you are a winner. Congratulations! I hope you could get an idea about the way you can connect two components and communicate with them. Please leave a comment if you got any issues with this post. I will help you always I can. Keep in touch with KDJ Guru Vue Post Series.

Write A Comment