awesome-repositories.com
博客
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目关于排名机制媒体报道MCP 服务器
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

54 个仓库

Awesome GitHub RepositoriesComponent Data Passing

Mechanisms for passing data from parent components to child components using custom attributes or properties to configure behavior.

Explore 54 awesome GitHub repositories matching user interface & experience · Component Data Passing. Refine with filters or upvote what's useful.

Awesome Component Data Passing GitHub Repositories

用 AI 发现最棒的仓库。我们将通过 AI 为您搜索最匹配的仓库。
  • facebook/reactfacebook 的头像

    facebook/react

    245,669在 GitHub 上查看↗

    React 是一个用于构建用户界面的 JavaScript 库,采用组件化架构和单向数据流。

    Synchronizes interface state by passing data from parent components to children via properties.

    JavaScriptjavascriptuifrontend
    在 GitHub 上查看↗245,669
  • vuejs/vuevuejs 的头像

    vuejs/vue

    209,900在 GitHub 上查看↗

    Vue 是一个渐进式的、基于组件的 JavaScript 框架,旨在构建响应式用户界面和单页应用程序。它以声明式模板系统为中心,将 HTML 转换为高效的渲染函数,允许开发者将复杂的界面组织成自动与应用程序状态同步的隔离、可复用单元。 该框架通过依赖跟踪响应式系统脱颖而出,该系统在渲染期间监控数据访问以触发精确更新。它提供了一个灵活的架构,支持作为轻量级库的增量采用和全规模应用程序开发。开发者可以利用强大的基于插件的扩展模型来注入全局逻辑,同时框架的虚拟 DOM 对账确保通过计算最小突变来实现高效的界面更新。 除了核心渲染能力外,该项目还包括一套全面的工具,用于管理应用程序状态、基于 URL 的路由和服务器端渲染。它为组件组合、内容分发和动画管理提供了广泛支持,并内置了自动内容转义等安全措施以防止常见漏洞。 该框架随附官方类型声明以支持静态分析,并可通过标准包管理器安装,或通过脚本标签直接集成到浏览器环境中。

    Enables passing dynamic data from parent to child components using custom attributes.

    TypeScriptframeworkfrontendjavascript
    在 GitHub 上查看↗209,900
  • facebook/react-nativefacebook 的头像

    facebook/react-native

    126,019在 GitHub 上查看↗

    This project is a cross-platform mobile framework that enables the development of native iOS and Android applications from a single codebase. It utilizes a declarative component-based model where developers define user interfaces using a syntax extension that maps directly to underlying platform-native view primitives. By decoupling application logic from the host platform's main thread, the framework maintains a consistent native view hierarchy while ensuring that JavaScript execution remains independent of UI rendering. The framework distinguishes itself through a robust bridge architecture

    Customizes component behavior and appearance by passing data through properties to create flexible UI elements.

    C++androidapp-frameworkcross-platform
    在 GitHub 上查看↗126,019
  • elemefe/elementElemeFE 的头像

    ElemeFE/element

    54,116在 GitHub 上查看↗

    Element is a Vue.js UI component library and web UI toolkit. It provides a collection of pre-styled user interface components and modular building blocks used to build web applications. The project includes a customizable CSS theme framework, allowing for the modification of visual styles and brand requirements through theme tools and generators. The toolkit covers frontend component management, custom web theming, and a workflow for rapid prototyping.

    Uses a prop-driven approach to control the visual state and behavior of interface elements via data passed from parents.

    Vuecomponentselement-uijavascript
    在 GitHub 上查看↗54,116
  • vuejs/corevuejs 的头像

    vuejs/core

    53,861在 GitHub 上查看↗

    Vue is a progressive JavaScript framework designed for building modular, reactive user interfaces. It utilizes a component-based architecture that allows developers to encapsulate logic, templates, and styles into reusable units. At its core, the framework employs a virtual DOM renderer and a proxy-based reactivity system to synchronize application state with the document object model efficiently. What distinguishes this framework is its focus on developer experience and flexibility. It supports a single-file component format that colocalizes related concerns, alongside a powerful composition

    Facilitates data flow from parent to child components using custom attributes that remain accessible within templates and internal logic.

    TypeScript
    在 GitHub 上查看↗53,861
  • styled-components/styled-componentsstyled-components 的头像

    styled-components/styled-components

    41,094在 GitHub 上查看↗

    styled-components is a CSS-in-JS styling library and tool for React components. It provides a cross-platform UI styling API and a dynamic theme management system to maintain consistent design tokens and encapsulate visual logic, preventing global scope conflicts. The library utilizes a unified interface that works across both web environments and native mobile frameworks. It enables the definition of styles using JavaScript and TypeScript template literals, allowing CSS to be bound directly to components. The system supports dynamic prop-based styling, style inheritance, and the creation of

    Provides a mechanism to pass a global theme object through the component tree using the React Context API.

    TypeScriptcsscss-in-jsreact
    在 GitHub 上查看↗41,094
  • marmelab/react-adminmarmelab 的头像

    marmelab/react-admin

    26,780在 GitHub 上查看↗

    React-admin is a framework for building data-driven administrative interfaces that connect to REST or GraphQL backends. It provides a comprehensive suite of tools for managing the full lifecycle of administrative applications, including resource-oriented routing, declarative form scaffolding, and context-driven state management. By utilizing a modular adapter-based architecture, the framework abstracts backend communication, allowing developers to build consistent CRUD interfaces that handle data fetching, authentication, and synchronization automatically. The project distinguishes itself thr

    Implements context providers to inject record data into component trees, enabling decoupled access to record properties.

    TypeScriptadminadmin-dashboardadmin-on-rest
    在 GitHub 上查看↗26,780
  • livewire/livewirelivewire 的头像

    livewire/livewire

    23,448在 GitHub 上查看↗

    Livewire is a full-stack framework for PHP that enables the development of reactive, dynamic user interfaces using server-side classes and templates. By bridging the gap between server-side logic and client-side DOM updates, it allows developers to build interactive web applications without writing custom JavaScript. The framework operates as a component-based library, where modular units encapsulate interface logic, state, and event handling directly on the server. The framework distinguishes itself through a reactive architecture that automatically synchronizes state between the browser and

    Automatically forwards HTML attributes from parent components to child elements to maintain styling and accessibility.

    PHP
    在 GitHub 上查看↗23,448
  • polymer/lit-htmlPolymer 的头像

    Polymer/lit-html

    21,682在 GitHub 上查看↗

    lit-html is a JavaScript HTML templating library and reactive UI template engine. It uses tagged template literals to render dynamic HTML templates, focusing on efficient partial updates to the DOM to minimize browser reflows. The library functions as a rendering tool for web components and supports server-side rendering to improve initial page load speeds and search engine optimization. Its capabilities cover the development of lightweight custom HTML elements and the management of dynamic HTML rendering. It includes support for high-performance list rendering and the handling of asynchrono

    Implements a protocol to share data across a tree of elements without passing properties through every intermediate layer.

    TypeScript
    在 GitHub 上查看↗21,682
  • lit/litlit 的头像

    lit/lit

    21,679在 GitHub 上查看↗

    Lit is a library for building lightweight, interoperable web components. It provides a base class that leverages native browser APIs to encapsulate state, logic, and styles, allowing developers to create custom elements that function consistently across any modern web project. The framework distinguishes itself through a reactive property system that automatically triggers efficient, batched DOM updates. By utilizing tagged template literals, it defines declarative UI structures that are compiled into optimized update instructions. Its architecture emphasizes modularity through a reactive con

    Passes data down to subcomponents via properties and bubbles information up to parents using events to maintain data flow.

    TypeScripthtml-templateslitlit-element
    在 GitHub 上查看↗21,679
  • leptos-rs/leptosleptos-rs 的头像

    leptos-rs/leptos

    20,993在 GitHub 上查看↗

    Leptos is a full-stack Rust web framework designed for building reactive applications that share logic and types between the server and the browser. It provides a comprehensive toolkit for developing web interfaces where specific DOM nodes update automatically in response to changes in underlying reactive signals, rather than re-rendering entire component trees. The framework distinguishes itself through a fine-grained reactivity model that tracks dependencies at the individual data point level. It utilizes compile-time template transformation to convert declarative HTML-like syntax into opti

    Shares data across component trees using context to avoid manual property drilling.

    Rustdomfine-grainedisomorphic
    在 GitHub 上查看↗20,993
  • microsoft/fluentuimicrosoft 的头像

    microsoft/fluentui

    20,063在 GitHub 上查看↗

    Fluent UI is a design system framework and TypeScript UI toolkit providing a comprehensive set of styles and accessibility guidelines. It functions as a React UI component library and a web component library, offering a collection of pre-styled elements and layout utilities to create a cohesive visual experience across web platforms. The project translates a brand design language into a functional library of reusable components, ensuring cross-product visual consistency. It enables the implementation of design systems for enterprise web applications through the use of standardized visual and

    Utilizes React Context providers to distribute visual configuration and branding settings across the component tree.

    TypeScriptcomponentsfluentmicrosoft
    在 GitHub 上查看↗20,063
  • mdx-js/mdxmdx-js 的头像

    mdx-js/mdx

    19,270在 GitHub 上查看↗

    This project is a document transformation pipeline that compiles Markdown files into executable JavaScript components. By integrating JSX directly into standard text documents, it enables the creation of interactive content that functions as a component-based engine for modern frontend applications. The system distinguishes itself through a unified, plugin-driven architecture that processes content by converting it into an abstract syntax tree. This allows for deep customization of the compilation logic, enabling developers to map standard Markdown elements to custom interface components, inj

    Uses provider patterns to inject shared data and context into nested content structures.

    JavaScriptjsxmarkdownmdx
    在 GitHub 上查看↗19,270
  • youzan/vant-weappyouzan 的头像

    youzan/vant-weapp

    18,398在 GitHub 上查看↗

    vant-weapp is a UI library for WeChat Mini Programs, providing a collection of reusable interface components to create consistent user experiences. It functions as a layout framework for structuring applications and a mobile form component library for capturing structured user data. The project includes a specialized e-commerce component set designed for retail patterns, such as product cards, area selectors, and order submission bars. The library covers a broad range of capabilities, including application navigation architecture, complex form implementation through calendars and pickers, a

    Controls component behavior and appearance through standardized properties passed from parent pages.

    JavaScriptminiprogramuivant
    在 GitHub 上查看↗18,398
  • emotion-js/emotionemotion-js 的头像

    emotion-js/emotion

    18,017在 GitHub 上查看↗

    This project is a styling library and framework designed for component-based architectures, enabling developers to define and manage visual styles directly within JavaScript or TypeScript. It functions as a styling engine that generates unique class names from style definitions, ensuring encapsulated, predictable, and maintainable visual presentation across applications. By integrating with component logic, it allows for the creation of reusable UI elements with styles defined through template literals or object syntax. The library distinguishes itself through a comprehensive suite of build-t

    Automatically forwards attributes and listeners from parent components to internal child elements to prevent unwanted data leakage.

    JavaScriptbabel-plugincsscss-in-js
    在 GitHub 上查看↗18,017
  • riot/riotriot 的头像

    riot/riot

    14,921在 GitHub 上查看↗

    Riot is a component-based library for building user interfaces through modular, single-file components. It functions as a framework for creating reusable elements that combine markup, logic, and scoped styles, which are then compiled into standard JavaScript functions for browser execution. The library distinguishes itself by utilizing direct rendering, which updates the document object model by tracking state changes without the overhead of a virtual representation. It supports server-side rendering and hydration to improve initial page load performance and search engine indexing. Developers

    Inject external data or objects into components during initialization to configure their initial behavior and appearance based on the needs of the parent application.

    JavaScriptclient-sidecustomelementcustomelements
    在 GitHub 上查看↗14,921
  • builderio/mitosisBuilderIO 的头像

    BuilderIO/mitosis

    13,858在 GitHub 上查看↗

    Mitosis is a cross-framework compiler that transforms a single JSX-based source into native components for multiple frontend libraries simultaneously. It functions as a multi-target UI library builder, allowing developers to maintain a single source of truth for design systems while generating production-ready code for diverse environments including React, Vue, Angular, and Svelte. The system operates by parsing unified component code into an intermediate JSON representation, which serves as the foundation for all downstream framework generators. This architecture utilizes a visitor-based tra

    Passes data through the component tree without manually threading props through every level of the hierarchy to simplify complex data management.

    TypeScriptangularbuildercompiler
    在 GitHub 上查看↗13,858
  • krasimir/react-in-patternskrasimir 的头像

    krasimir/react-in-patterns

    13,578在 GitHub 上查看↗

    This project is a comprehensive guide to architectural patterns and design techniques for building modular user interfaces with React. It focuses on structuring component hierarchies, implementing state management patterns, and decoupling services to ensure applications remain maintainable and scalable. The collection emphasizes strategies for dependency injection and the separation of business logic from presentation layers. It provides detailed approaches for utilizing containers, higher-order components, and module registries to isolate external services and third-party libraries from the

    Implements providers to pass global data through the component tree and avoid property drilling.

    JavaScriptdata-flowdependencyinjection
    在 GitHub 上查看↗13,578
  • semantic-org/semantic-ui-reactSemantic-Org 的头像

    Semantic-Org/Semantic-UI-React

    13,218在 GitHub 上查看↗

    Semantic UI React is a declarative component library that provides native React bindings for the Semantic UI design language. It enables the construction of complex user interfaces through a modular, component-based architecture that maps directly to established design patterns, allowing developers to build consistent web application layouts without manual HTML markup. The library distinguishes itself through a shorthand property system that automatically generates and populates nested child components from data objects, significantly reducing the need for verbose code. It also supports polym

    Passes arbitrary HTML attributes and listeners from parent components to internal DOM elements to ensure compatibility with native browser behavior.

    JavaScriptcomponent-librarycomponentsfrontend-components
    在 GitHub 上查看↗13,218
  • geniusvjr/learningnotesGeniusVJR 的头像

    GeniusVJR/LearningNotes

    13,145在 GitHub 上查看↗

    LearningNotes 是一个技术知识库和工程学习指南,专注于 Android 框架内部原理、系统架构和移动性能优化。它作为分析 Android 引导序列、进程引导和系统服务初始化的参考。 该项目提供了关于移动性能的详细指南,包括减少内存占用、识别内存泄漏和优化图像解码的策略。它进一步涵盖了使用 AIDL 和 Binder 内核驱动程序的 Android 进程间通信,以及通过 MVVM 和 MVP 等模式将业务逻辑与用户界面解耦的软件架构手册。 除了移动开发外,该仓库还包括用于技术面试准备的计算机科学知识库,涵盖数据结构、算法和操作系统概念。它还具有 Git 版本控制的实用参考,详细介绍了仓库管理、同步和分支工作流。

    Describes passing information between host activities and child fragments using arguments and shared state bundles.

    在 GitHub 上查看↗13,145
上一个123下一个
  1. Home
  2. User Interface & Experience
  3. Component Architectures
  4. Component Communication Patterns
  5. Component Data Passing

探索子标签

  • Builder Method Data InjectionPassing dynamic data like player names into a RIB's builder method so child RIBs access them as dependencies. **Distinct from Component Data Passing:** Distinct from Component Data Passing: passes data through builder methods and dependency injection rather than custom attributes or properties.
  • Component-to-Controller Data Exposure1 个子标签Exposing component properties so controllers can read them during initialization and state changes. **Distinct from Component Data Passing:** Distinct from Component Data Passing: focuses on data flow from component to controller rather than parent-to-child data passing.
  • Context ProvidersMechanisms for passing data through the component tree without explicit prop drilling. **Distinct from Component Data Passing:** Distinct from generic data passing: specifically implements the Context API for scoped data injection.
  • Context-Based Data PropagationSharing data between deeply nested interface layers without manually passing it through every intermediate component. **Distinct from Component Data Passing:** Focuses on avoiding prop-drilling through a component tree rather than simple parent-to-child passing.
  • Contextual Data PropagationPassing data through a component tree using a context provider to avoid prop-drilling through intermediate layers. **Distinct from Component Data Passing:** Distinct from general Component Data Passing by specifically avoiding intermediate layers through a context protocol.
  • Data Isolation StrategiesTechniques for ensuring each component instance maintains an independent copy of its data. **Distinct from Component Data Passing:** Distinct from Component Data Passing: focuses on instance-level data isolation rather than data transmission.
  • Deep Data PropagationMechanisms for passing data to deeply nested components without manual prop drilling. **Distinct from Component Data Passing:** Distinct from general Component Data Passing by focusing on skipping intermediate layers in a deep tree.
  • Explicit Action Selector PassingPassing action selectors from parent to child components to avoid hidden coupling and runtime crashes. **Distinct from Component Data Passing:** Distinct from Component Data Passing: focuses on passing action selectors specifically rather than general data or properties.
  • Formatting Argument PassingSupplying additional parameters to formatting functions to control data transformation. **Distinct from Model Argument Binding:** Focuses on data formatting parameters rather than general component prop passing.
  • Ref Forwarding3 个子标签Techniques for passing references from parent components down to child DOM elements. **Distinct from Component Data Passing:** Specifically focuses on DOM element references (refs) rather than generic data attributes or props.
  • Request-Scoped Context Maps2 个子标签Scoped operation maps for sharing contextual information like request IDs between hooks and tools. **Distinct from Component Data Passing:** Distinct from Component Data Passing: focuses on request-scoped context sharing across agent components, not parent-child UI component data flow.
  • Transparent Attribute ForwardingMechanisms for automatically passing attributes and listeners from parent components to internal child elements. **Distinct from Component Data Passing:** Focuses on the automatic forwarding of attributes, distinct from manual data passing.
  • URL Parameter1 个子标签Extracting dynamic segments from a URL path and passing them as properties to a single component that handles many concrete identifiers. **Distinct from Component Data Passing:** Distinct from Component Data Passing: focuses on URL-driven parameter extraction rather than general parent-to-child attribute passing.