Vue Patterns (Part — 2)
2. Component Communication
Props and Events
1️⃣ Vue components follow the one-way data flow
2️⃣ props are a reactive data source
3️⃣ Child Components can only emit events to their direct parent (unlike the previous gif)
4️⃣ There is something called Event-Bus which is a global Vue instance that helps to share props between components without referring to parent-component
3. Component Event Handling
1. Listening to Events
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered
2. Method Event Handlers
The logic for many event handlers will be more complex though, That’s why v-on can also accept the name of a method you’d like to call.
3. Method in Inline Handlers
Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement
4. Component Conditional Rendering
1. Directives (v-if, v-else and v-else-if)
Often in a web application, we want elements to appear on the page depending on if a condition is met or not.
In vue js, we have many options to perform conditional rendering for our elements, check the following snippet to see the different ways to perform that:
2. Directives (v-show)
v-show used to show or hide our element depending on if a condition is met or not
🎯 v-show VS v-if
The main difference between the two is that:
- v-if — Only renders the element to the DOM if the expression passes.
- v-show — Renders all elements to the DOM and then uses the CSS display property to hide elements if the expression fails.
- v-show — Does not support v-else, v-else-if
3. Render Function or JSX
If you use render functions or JSX in your vue application, you can apply all the techniques,
1️⃣ if-else
2️⃣ switch-case
3️⃣ JSX (Object-Map)
4️⃣ Ternary operators
5️⃣ Logical operators
3.1 JSX (If-Else)
3.2 JSX (Switch-Case)
3.3 JSX (Object-Map)
3.4 JSX (Ternary-Operator)
3.5 JSX (Logical-Operator)
5. Dynamic Component
Swappable Dynamic Components
Sometimes, it’s useful to dynamically switch between components, which is can be done using Vue’s <component> element with the is a special attribute:
Component element just takes a string which is the component name or component definition using `:is` prop, After that Vue then looks up the component referenced by that string and renders it in place of the <component> tag
🔔 Notes
1️⃣ with the previous code example, the rendered component will be destroyed if a different component is rendered in <component>
2️⃣ If you want components to keep their instances without being destroyed, you should wrap the <component> tag in a <keep-alive> tag
6. Functional Component
Stateless Functional Component
1️⃣ A functional component is a special-SFC, with no-script-tag
2️⃣ It only accepts props in order to display data.
3️⃣ To make your component a functional one, you should add a functional attribute to the template tag
✅ Advantages
1️⃣ Faster rendering
2️⃣ Lighter memory usage
7. Renderless Component
Renderless Component
1️⃣ A renderless component is basically a component that does not render any HTML to the DOM
2️⃣ A renderless component makes use of the Slots API in order to achieve what we want.
🔔 The only job of Renderless.vue is to provide the prop name
✅ Advantages
1️⃣ Separate our logic from our markup
