Vue Tip: Destructure Props in Composition API Without Losing Reactivity
How to correctly destructure props object in a Vue component while maintaining the reactivity.
Category · 59 articles
Script
Articles in the category Script.
Vue Tip: Typing Component Events
To declare emits with full type inference support, we can use the defineEmits API, which is automatically available inside <script setup>.
Vue Tip: Access DOM in Watcher Callback After Vue Updated It
To access the DOM after Vue has updated it in a watcher callback, you can use the flush post option.'
Vue Tip: Pass Custom Arguments to Event Handler Method
Sometimes we need to pass custom arguments to the event handler method and access the original DOM event.
Vue Tip: Avoid Mutating a Prop Directly
Mutating props is an anti-pattern. You should use computed properties instead.
Vue Tip: Disable Attribute Inheritance
By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This may not always be the desired behavior and, therefore, can be disabled. A typical use case is a component with multiple root nodes.
Vue Tip: Use Provide & Inject to Avoid Prop Drilling
Props are the standard way to pass data from the parent to a child component. Sometimes, we want to share data from a parent component to all its children components without using a store. Provide / Inject solves this problem and avoids prop drilling.
Vue Tip: Use Vue Without Build Step
When using Vue from a CDN, no "build step" is involved. This makes the setup much more straightforward and is suitable for enhancing static HTML or integrating with a backend framework.
Vue Tip: Defining and Registering Vue Web Components
Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements.
Vue Tip: Expose Properties in a Script Setup Component
Components using script setup are closed by default and will not expose any of the bindings declared inside script setup.