在带有 MingleJS 的 Livewire 应用中使用 Vue 或 React 组件

MingleJS 可用于在 Livewire 组件或 Filament 应用中使用 Vue 和 React 组件。该包由 Joao Patricio 创建，对于在登录页及你想使用 Vue 或 React 的复杂组件很有用。它也可以作为一种增量方式，在 Vue 或 React 生态系统中使用用 Livewire 或使用第三方组件。

MingleJS Demo 组件
MingleJS 的工作原理是在服务器端渲染一个 <div>，然后在客户端挂载一个组件。服务器端 Livewire 组件渲染每个 JS 组件，因此可以在与 Livewire 组件隔离的前端获得 JavaScript 交互。此外，后端可以将数据传递给前端可用的组件。

namespace App\Livewire;
 
use Ijpatricio\Mingle\Concerns\InteractsWithMingles;
use Ijpatricio\Mingle\Contracts\HasMingles;
use Livewire\Component;
 
class ChatApp extends Component implements HasMingles
{
    use InteractsWithMingles;
 
    public function component(): string
    {
        return 'resources/js/ChatApp/index.js';
    }
 
    public function mingleData()
    {
        return [
            'message' => 'Message in a bottle 🍾',
        ];
    }
 
    // ...
}

mingle 组件包括一个 Livewire 组件，该组件使用 InteractisWithMingles 特性、一个胶水 JavaScript 文件和前端组件文件。下面是一个使用 React 的 Mingle 组件的示例：

// resources/js/ChatApp/index.js
import mingle from '@mingle/mingleReact'
import ChatApp from './ChatApp.jsx'
 
mingle('resources/js/ChatApp/index.js', ChatApp)
 
// resources/js/ChatApp/ChatApp.jsx
import React from 'react'
 
function ChatApp({wire, ...props}) {
 
    const message = props.mingleData.message
 
    console.log(message) // 'Message in a bottle 🍾'
 
    wire.doubleIt(2)
        .then(data => {
            console.log(data) // 4
        })
 
    return (
        <div>
            {/* <!-- Create something great! --> */}
        </div>
    )
}
 
export default ChatApp

更多

要开始使用 MingleJS，请跳转到 MingleJS 文档。