Many Vue.js app components will probably have some sort of parent-child relationship. In this part of the series I aim to talk about common patterns as well as anti-patterns that you should avoid.
If you follow the basic structure you should be safe for the future.
The goal is to understand how to write reusable components that are independent from the parent.
This is the second article of a series of Vue.js communication articles.
About the series
Communication in Vue.js is one of the first topics you’ll have to learn about. I came from writing Rails front-ends, mostly server side rendered and using a little bit of jQuery here and there when I was starting to write Vue.js code.
Even though these kinds of frameworks have been around for a long time, it might still be a little bit complicated to wrap your head around frameworks that work with components, which are supposed to create separately but need to communicate to work together.
This is the first article of a series of Vue.js communication articles.
Do you want to create a JSFiddle to shoot out a quick Vue test, proof of concept or bug report?
Vue’s webpack setup gives you section dedicated for your templates.
Most JSFiddles I see have the template in the JS window using Vue’s
I’ve prepared a fiddle that lets you use the HTML section.
Check it out:
Please, share your stuff in the comment below to show off your work!
LINK: JSFiddle starter for Vue.js
I’m not sure I can recommend that for vue2 anymore. I’m not sure what that solution would be but I would probably go for components now.
The original article is here:
Working with Vue can be awesome. But you might know that it can also give you headaches, when you try to combine it with jQuery plugins or other libraries.
The problem is that jQuery works fundamentally different than Vue. Vue renders everything based of the component’s core data. jQuery is mostly meant to do simple click handling and has powerful abilities manipulate the DOM.
When I looked for help myself I have found some unsatisfying solutions where components did do all the initialization work.
Let me show you how I would combine Vue.js and jQuery.
What’s the goal?
In most cases you can omit using jQuery and find a simple Vue based solution to your problem. Modals, sliders and so on are pretty simple with a Vue component and CSS.
So the goal is to use powerful jQuery plugins that cannot be written quickly in Vue.
We will …
- … use Vue directives to build a bridge to jQuery.
- … initialize the plugin when the element is attached.
- … destroy it when the element is detached.
- … send events to notify the component.
- … receive events from the component and pass them to the plugin.