SuperAPI AI 工具集

twig-component

通用与其它

查看项目

更新于 10-16 01:08

技能介绍

用途:TwigComponent 用于在 Symfony/Twig 中构建可复用的服务端渲染 UI 组件,思路类似 React/Vue 组件,但不依赖 JavaScript,仅做初次渲染。若组件需要响应用户输入(AJAX 重渲染、数据绑定、动作),应改用 LiveComponent。

两种形式:类组件(PHP 类 + Twig 模板),适合需要逻辑、服务或计算属性的组件;匿名组件(仅 Twig),用 {% props %} 直接声明属性,适合简单展示元素。

安装:composer require symfony/ux-twig-component

主要能力:用 #[AsTwigComponent] 注解标记 PHP 类,公开属性即 props(无默认值为必填);mount() 在初始化时计算派生状态;: 前缀可传 Twig 表达式而非字符串;通过 {% block content %} 与 <twig:block name="..."> 实现默认块与命名块插槽;get 前缀方法作为 this.xxx 计算属性(每次访问计算,不跨渲染缓存);{{ attributes }} 接收消费者传入的额外 HTML 属性,并支持 defaults()、without()、render()、has() 等方法;组件本身是 Symfony 服务,可构造函数注入依赖;用 #[PreMount] 与 #[PostMount] 钩子处理生命周期;组件可自然嵌套。

用法示例:<twig:Alert type="success" message="Saved!" />;匿名组件模板中写 {% props variant = 'primary' %} 并配合 {{ attributes }}。官方推荐 HTML 语法,{% component %} 为较难读的旧写法。配置在 config/packages/twig_component.yaml 中设置 anonymous_template_directory 与 defaults。另可与 UX Icons、UX Map 在模板内配合使用。

限制:仅初次服务端渲染,不处理用户交互后的重渲染;计算属性不缓存;命名、属性、嵌套等方面的常见陷阱见其 references 文档。具体收费、价格与平台信息暂未提供。