This article demonstrates how to build a highly reusable, function‑based modal system in Vue 3 that supports lazy loading, prop passing, event binding, provide/inject data injection, custom slots, and method exposure, allowing developers to display any modal component with a single function call.
This article explains how to create a robust Vue 3 form component using Element Plus, covering component hierarchy, data binding with model, rule definition with async-validator, provide/inject communication, and step‑by‑step validation logic with practical code examples.
This article details the design, data structure, and implementation of a reusable conditional filter tree component using Vue2 and Vue3, covering node addition, deletion, relationship handling, form validation, and provide/inject communication, along with code examples and discussion of challenges and future improvements.
The article discusses common Vue component communication patterns such as props‑emit, event buses, and ref usage, then introduces a colleague's provide‑inject plus ref approach that simplifies cross‑component interactions while highlighting its trade‑offs regarding Vue's one‑way data flow.
This article explains the design principles, implementation details, and advanced features of NutUI’s Collapse panel component, covering basic interaction, height‑based animation, flexible title bar with icons, configuration upgrades, slot usage, CSS variable styling, and Vue 3 provide/inject communication, supplemented with code examples.
This article provides a comprehensive Vue 3 composition‑API tutorial covering project initialization, the setup function, reactive and ref utilities, computed properties, watch, provide/inject, template refs, and nextTick, with detailed code examples and explanations.
Vue.js offers multiple component communication techniques—including one‑way props, $emit/$on events, an event bus, $attrs/$listeners, provide/inject, direct $parent/$children/$refs access, Vuex state management, and slot‑based patterns—enabling flexible data flow between parents, children, siblings, and distant descendants.
This article explains Vue’s provide/inject API, how it enables ancestor components to share data with any descendant, compares it to Vuex for global state, shows practical code examples, discusses limitations and best‑practice guidelines, and demonstrates its use in component libraries like Element UI.
