README

enflow/livewire-twig 包提供了在您的 Twig 模板中加载 Livewire 组件的选项。

版本

<= 3.x.x

3.x.x 版本支持 Livewire 2。

>= 4.x.x

4.x.x 版本支持 Livewire 3。

此版本将 {% livewire.component test %} 语法更改为 {% livewire.component 'test' %} 语法。

对于 {% livewire.component %} 和其他指令的名称参数现在被解释为表达式，允许使用变量或 Twig 表达式作为名称。请注意，由于这个原因，常量名称现在必须用引号括起来。

安装

您可以通过 composer 安装此包

composer require enflow/livewire-twig

使用方法

当使用 rcrowe/twigbridge 时，Twig 扩展将自动注册。如果您使用的是其他配置，您可能希望手动注册扩展，通过加载扩展 Enflow\LivewireTwig\LivewireExtension。

此包为 @livewireScripts、@livewireStyles、@livewireScriptConfig、@livewire、@entangle、@this 和 @persist 指令提供了包装器。底层的一切都是由 livewire/livewire 驱动的。
您可以像平常一样注册您的 Livewire 组件。

要使用 Livewire，请在模板的 head 标签中添加以下标签，并在 body 标签的结束之前添加。

<html>
<head>
    ...
    {{ livewireStyles() }}
</head>
<body>
    ...
    {{ livewireScripts() }}
</body>
</html>

在您的主体中，您可能包括如下组件

{# The Twig version of '@livewire' #}
{% livewire.component 'counter' %}

{# If you wish to pass along variables to your component #}
{% livewire.component 'counter' with {'count': 3} %}

{# To include a nested component (or dashes), you need to use '' #}
{% livewire.component 'nested.component' %}

{# To use key tracking, you need to use key(<expression>) #}
{% livewire.component 'counter' key('counterkey') %}

{# The Twig version of '@persist' #}
{% livewire.persist 'name' %}
<div>
    ...
</div>
{% livewire.endpersist %}

{# The Twig version of '@entangle' (as of Livewire 3.01 poorly documented, need to check the source code) #}
{% livewire.entangle 'expression' %}

{# The Twig version of '@this' (Can only be used after Livewire initialization is complete) #}
{% livewire.this %}

{# The Twig version of '@livewireScriptConfig' (as of Livewire 3.01 poorly documented, need to check the source code) #}
{{ livewireScriptConfig(<options>) }}

示例

将以下内容添加到 resources/views/livewire/counter.twig

<div>
    <div wire:click="add">+</div>
    <div>{{ count }}</div>
    <div wire:click="subtract">-</div>
</div>

将以下内容添加到 app/Http/Livewire/Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public int $count = 1;

    public function add()
    {
        $this->count++;
    }

    public function subtract()
    {
        $this->count--;
    }
}

待办事项

更多测试。

测试

$ composer test

贡献

请参阅 CONTRIBUTING 以获取详细信息。

安全性

如果您发现任何与安全性相关的问题，请通过电子邮件 michel@enflow.nl 通知，而不是使用问题跟踪器。

致谢

关于 Enflow

Enflow 是一家位于荷兰 Alphen aan den Rijn 的数字创意机构。我们专注于开发网络应用程序、移动应用程序和网站。您可以在我们的网站上找到更多信息在这里。

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件。

enflow / livewire-twig

维护者

详细信息