How to Create Nested LiveView Components: Difference between revisions
From ElixirBlocks
(Created page with "This example demonstrates a nested LiveView component. <source> defmodule AppxWeb.SandboxLive do use AppxWeb, :live_view import MyComponent def mount(_params, _session, socket) do {:ok, socket} end def render(assigns) do ~H""" Hello World! YAY <MyComponent.greet name="Jane" /> """ end end </source> <source> defmodule MyComponent do use Phoenix.Component def greet(assigns) do ~H""" <p>Hello, <%= @name %>!</p>...") |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 11: | Line 11: | ||
def render(assigns) do | def render(assigns) do | ||
~H""" | ~H""" | ||
Hello World! YAY | |||
<MyComponent.greet name="Jane" /> | |||
""" | """ | ||
end | end | ||
| Line 25: | Line 25: | ||
def greet(assigns) do | def greet(assigns) do | ||
~H""" | ~H""" | ||
<p>Hello, <%= @name %>!</p> | |||
""" | """ | ||
end | end | ||
end | end | ||
</source> | </source> | ||
Latest revision as of 12:25, 6 April 2023
This example demonstrates a nested LiveView component.
defmodule AppxWeb.SandboxLive do
use AppxWeb, :live_view
import MyComponent
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
~H"""
Hello World! YAY
<MyComponent.greet name="Jane" />
"""
end
end
defmodule MyComponent do use Phoenix.Component def greet(assigns) do ~H""" <p>Hello, <%= @name %>!</p> """ end end