README

在October CMS主题、应用和插件中集成Laravel Livewire组件，使用Twig、Blade或PHP提供的模板。

需求

• October CMS v3.3.9或更高版本

安装

使用Composer安装，请在项目根目录中运行以下命令。

composer require rainlab/livewire-plugin

渲染Livewire组件

使用livewire CMS组件在CMS主题页面或布局中激活Livewire。例如，您的页面可能看起来像这样。

url = "/test"
layout = "default"

[livewire]
==
<div class="container">
    {% livewire 'counter' %}
</div>

接下来，使用{% livewire %} Twig标签渲染Livewire组件。

{% livewire 'counter' %}

您可以使用等号（=）向组件传递变量。

{% livewire 'counter' count=3 %}

注意：为了正确运行，您的CMS布局应包含如占位符文档中描述的{% styles %}和{% scripts %}占位符标签。

文件位置

默认情况下，类存储在app/Livewire目录中。但是，您可以在插件中注册自定义类（见下文）。

默认情况下，视图存储在app/views/livewire目录中。在视图目录中支持以下模板语法，由其文件扩展名确定。

插件注册

要使用registerLivewireComponents覆盖方法在插件中注册Livewire组件。该方法应返回一个作为键的类名和作为值的组件别名。

public function registerLivewireComponents()
{
    return [
        \October\Demo\Livewire\Todo::class => 'demoTodo'
    ];
}

在上面的示例中，October\Demo\Livewire\Todo类引用以下文件位置

• 类文件：plugins/october/demo/livewire/Todo.php
• 视图文件：plugins/october/demo/views/livewire/todo.htm。

类应通过覆盖render方法返回其视图路径，并返回相对于插件的视图实例。

namespace October\Demo\Livewire;

use RainLab\Livewire\Classes\LivewireBase;

class Todo extends LivewireBase
{
    public function render()
    {
        return \View::make('october.demo::livewire.todo');
    }
}

组件可以使用demoTodo别名在任何地方渲染。

{% livewire 'demoTodo' %}

CMS组件中的使用

您可以使用RainLab\Livewire\Behaviors\LivewireComponent行为在您的CMS组件中实现Livewire。这种实现将确保在组件使用时注册必要的依赖项。

class MyComponent extends \Cms\Classes\ComponentBase
{
    public $implement = [
        \RainLab\Livewire\Behaviors\LivewireComponent::class
    ];
}

然后使用{% livewire %}标签渲染组件。

{% livewire 'counter' %}

或者，您可以使用renderLivewire方法在PHP中渲染组件。

$this->renderLivewire('counter');

后端控制器中的使用

您可以使用RainLab\Livewire\Behaviors\LivewireController行为在您的后端控制器中实现Livewire。这种实现将确保控制器注册了必要的依赖项。

class MyController extends \Backend\Classes\Controller
{
    public $implement = [
        \RainLab\Livewire\Behaviors\LivewireController::class
    ];
}

然后使用makeLivewire方法渲染组件。

<?= $this->makeLivewire('counter') ?>

使用示例

在此，我们将在app目录中创建一个组件，并在CMS页面上独立渲染它。首先，创建一个名为app/views/livewire/counter.htm的文件，并包含以下内容。

<div class="input-group py-3 w-25">
    <button wire:click="add" class="btn btn-outline-secondary">
        Add
    </button>
    <div class="form-control">
        {{ count }}
    </div>
    <button wire:click="subtract" class="btn btn-outline-secondary">
        Subtract
    </button>
</div>

创建一个名为app/Livewire/Counter.php的文件，并包含以下内容。

<?php namespace App\Livewire;

use RainLab\Livewire\Classes\LivewireBase;

class Counter extends LivewireBase
{
    public $count = 1;

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

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

此组件现在可以在您的CMS模板中作为counter渲染。组件名称由类名派生。

{% livewire 'counter' %}

例如，在演示主题中，创建一个名为test.htm的模板，并包含以下内容。然后打开/test URL。

url = "/test"
layout = "default"

[livewire]
==
<div class="container">
    {% livewire 'counter' %}
</div>

另请参阅

• Laravel Livewire

许可证

此插件是October CMS平台的官方扩展，如果您拥有平台许可证，则可以免费使用。有关详细信息，请参阅最终用户许可协议（EULA）许可。