如何获取Livewire组件当前实例的根元素？

针对你遇到的问题，这里提供几种可靠的解决办法：

方法1：直接在Blade视图中输出组件ID #

既然Livewire组件的PHP端已经有公开的id属性，你可以直接在脚本中通过Blade语法输出这个值，无需依赖JS实例：

document.addEventListener('livewire:load', function () {
    const componentId = '{{ $this->id }}';
    console.log(componentId);
});

方法2：通过组件根元素的wire:id属性获取 #

每个Livewire组件的根元素都会自动带有wire:id属性，值就是组件ID，你可以通过DOM选择器获取：

document.addEventListener('livewire:load', function () {
    // 单个组件场景下直接选择第一个带wire:id的元素
    const componentRoot = document.querySelector('[wire\\:id]');
    const componentId = componentRoot.getAttribute('wire:id');
    console.log(componentId);
    
    // 多组件场景可通过类名等标识定位目标组件
    // const componentRoot = document.querySelector('.your-component-class[wire\\:id]');
});

方法3：利用Livewire钩子监听组件初始化 #

使用Livewire提供的component.initialized钩子，在组件初始化完成后直接获取ID，这种方式更可靠，尤其适合多组件场景：

Livewire.hook('component.initialized', (component) => {
    // component即为当前初始化的Livewire组件实例
    console.log(component.id);
});

关于你之前尝试的问题说明 #

• 直接使用@this.id报错：@this编译后的Livewire.find([component-id])在livewire:load事件触发时，组件实例可能还未完全挂载，导致无法直接访问属性。
• 使用@this.get('id')返回null：get()方法用于获取组件的数据属性，而id是组件的内置属性，不属于数据属性范畴，因此无法通过get()获取。

内容的提问来源于stack exchange，提问作者Rusurano