rails: view_component 使用

添加 gem 到项目

gem "view_component"

命令生成组件

rails generate component ComponentName param1 param2

组件一般的文件结构

app/components/
├── my_component.rb      # 组件类（逻辑）
└── my_component.html.erb # 模板（视图）

也可以是单文件

class ExampleComponent < ViewComponent::Base
  erb_template <<-ERB
    <span title="<%= @title %>"><%= content %></span>
  ERB

  def initialize(title:)
    @title = title
  end
end

统一的调用格式

<%= render(ExampleComponent.new(title: "my title")) do %>
  Hello, World!
<% end %>

组件逻辑

# frozen_string_literal: true

class MyComponent < ViewComponent::Base
  # 初始化方法，定义组件接收的参数
  def initialize(title:, description: nil, variant: "default")
    @title = title
    @description = description
    @variant = variant
  end

  # 辅助方法，可以在模板中调用
  def variant_classes
    case @variant
    when "primary"
      "bg-blue-500 text-white"
    when "secondary"
      "bg-gray-500 text-white"
    else
      "bg-white text-gray-800"
    end
  end
end

模板逻辑

<!-- 使用 <%= %> 输出方法结果，不是 #{} -->
<div class="my-component <%= variant_classes %>">
  <h2><%= @title %></h2>

  <% if @description %>
    <p><%= @description %></p>
  <% end %>

  <!-- 使用 content 渲染插槽内容 -->
  <div class="body">
    <%= content %>
  </div>
</div>

使用组件

<%= render MyComponent.new(
  title: "Hello",
  description: "World",
  variant: "primary"
) %>

带 slot 的组件

<%= render MyComponent.new(title: "卡片标题") do %>
  <p>这是插入到组件中的内容</p>
  <button>操作按钮</button>
<% end %>