英文:
How to get the root element of the current instance of a Livewire component?
问题
根据Livewire官方文档中的内联脚本，可以通过使用@this指令在Livewire组件的视图内联脚本中获取当前Livewire组件的实例。
正如文档指出的那样，
> 注意：@this指令编译为以下JavaScript字符串以供解释：“Livewire.find([component-id])”.
文档中未提及如何检索组件ID本身或根元素。
在寻找答案的过程中，我偶然发现了Livewire源代码中的此文件，证明Livewire组件确实有一个名为id的公共属性。然而，在livewire:load事件中将@this.id记录到控制台的方式如下：
document.addEventListener('livewire:load', function () {
console.log(@this.id);
});
将在控制台输出以下内容：
在相同位置使用@this.get('id')将返回null，所以我想我做错了什么。
如何使用JavaScript检索该ID？
英文:
According to the official Livewire docs on inline scripts, it's possible to get the current instance of a Livewire component inside the inline scripts of their views by using @this directive.
As the documentation points out,
> Note: the @this directive compiles to the following string for JavaScript to interpret: "Livewire.find([component-id])".
It mentions nothing else about retrieval of the component ID itself, or the root element.
In my effort to find the answer, I've stumbled upon this file in Livewire's source code, which proves that there indeed is a public property id in Livewire components. However, logging @this.id into the console on livewire:load event in the following way:
document.addEventListener('livewire:load', function () {
console.log(@this.id);
});
will output to the console the following:
Logging @this.get('id') in the same place will return null, so I guess I am doing something wrong.
How to retrieve that ID by using JavaScript?
答案1
得分: 1
这是如何检索实例ID和根元素作为DOM节点的方式。
var instanceID = @this.__instance.id; // 实例的唯一ID。
var instanceRootElement = @this.__instance.el; // 实例的根DOM节点。
为什么它有效
在Livewire类声明中，有一个方法find，在使用@this指令时执行，根据问题中引用的Livewire文档。该方法的返回值不是组件类本身，而是其$wire属性。
可以在Component类声明中的this找到此$wire属性的getter。它利用Proxy对象拦截一些属性并正确处理它们。被拦截的属性之一是__instance属性，它返回组件的实例本身。从那里，我们可以直接访问其所有属性和方法，包括用于根DOM节点的el和用于组件的唯一标识符的id。
根据属性前面的下划线，这个__instance属性被保留供内部使用，但目前这是从内联脚本中访问这些属性的唯一方式。
英文:
This is how to retrieve both the instance ID and the root element as a DOM node.
var instanceID = @this.__instance.id; // The unique ID of the instance.
var instanceRootElement = @this.__instance.el; // The root DOM node of the instance.
Why It Works
Here in the Livewire class declaration, there is a method find that is executed when we use @this directive, according to Livewire documentation on inline scripts referred in the question. The return value of the method is not the component class itself, but its $wire property.
The getter for this $wire property can be examined here in the Component class declaration. It utilizes the Proxy object to intercept some of the properties and process them correctly. Among the intercepted properties is the __instance property, which returns the component's instance itself. From there, we can directly access all its properties and methods, including el for the root DOM node and id for the unique identifier of the component.
Judging by the underscores before the property, this __instance property is reserved for internal usage, but this currently is the only way to access these properties from inline scripts.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论