如何在javascript中使用Livewire组件？

Question

查看文档https://laravel-livewire.com/docs/2.x/events#from-js 在 javascript

中使用 Livewire 组件

<script>
    Livewire.emit('postAdded')
</script>

我不明白 Livewire 是什么？声明了 var ？我怎么才能得到它。我需要从 JS 代码中获取一些 var 和运行组件方法的值。我该怎么做？

修改块#2：

在我的组件模板中定义：

<div class="admin_page_container" id="facilities_admin_page_container">
   ...

在我的 alpinejs 组件的方法中我这样做

function adminFacilitiesComponent() {
    return {
        getSubmitLabel: function (component) {
            const doc = document.getElementById("facilities_admin_page_container");
            console.log('doc::')
            console.log(doc)

            var updateMode = window.livewire.find(doc.getAttribute("wire:updateMode"))
            // But I got error : index.js:31 Uncaught (in promise) TypeError: Cannot read property '$wire' of undefined
            // I see content of doc in browser's console : https://prnt.sc/1sdu4f1
            console.log('updateMode::')
            console.log(updateMode)

在我的组件中我定义了：

namespace App\Http\Livewire\Admin;

...
class Facilities extends Component
{
    ...
    public $updateMode = 'browse';

我只是尝试在 JS getSubmitLabel 函数中获取 $updateMode 的值...

谢谢！

Answer 1

要回答 livewire 全局对象的来源问题：您在布局主体中注入了 livewire 脚本：

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

https://laravel-livewire.com/docs/2.x/installation

livewire 全局对象可通过 window.Livewire 获得。你要找的方法大概是

 Livewire.emitTo(componentName, eventName, ...params)

确保 livewire 对象在调用此方法时实际可用。

有关所有可用方法，请参阅 https://laravel-livewire.com/docs/2.x/reference

要在 javascript 中获取组件，请尝试：

const doc = document.getElementById("myComponent");
window.livewire.find(doc.getAttribute("wire:id"))

Answer 2

Livewire recommends that you use AlpineJS for most of your JavaScript needs, but it does support using tags directly inside your component's view.

<!DOCTYPE html>
<html>
  <head>
     @livewireStyles
  </head>

<body>
      <p>This is My Component Call </p>
      @livewire('blog-component')

@livewireScripts
     <script>
     Livewire.emit('postAdded') //also write Javascript Hear
     
       document.addEventListener('livewire:load', function () {
        // Your JS here.
    })
     </script>

Reference
https://laravel-livewire.com/docs/2.x/inline-scripts https://laravel-livewire.com/docs/2.x/reference

如何在javascript中使用Livewire组件？

How to use Livewire component inside of javascript?

laravel-livewire

alpine.js