通过 Hooks 将事件推送回实时视图或实时组件

Posted on 2025-11-05

在 Phoenix LiveView 中编写钩子时，从 JavaScript 钩子将事件推送回 Live View 或 Live Component 的模式略有不同。

  1. 当向实时视图组件推送事件时，必须使用pushEventTo ，并指定实时组件模板中元素的 DOM id 。
  2. 当向实时组件推送内容时，必须使用pushEvent ，它会在实时视图中调用handle_event 。

我用钩针钩的图案和这个类似：

如果 （ this.el.dataset.from_live_component ）​​​​​​ {  
	this.pushEventTo ( ` # $ { ctx.el.id } ` ,​​​​ 'file_removed' ， {  
		ID ： ctx.el.id​​​​  
	});  
} 别的 {  
	this.pushEvent ( ' file_removed ' , {  
		ID ： ctx.el.id​​​​  
	});  
}

使用 Live 组件中的 hook 时，唯一的区别在于需要指定一个额外的data-from_live_component属性，以告诉 hook 如何将事件推送回去：

 < div id = "my-unique-dom-id" phx - hook = "MyHook" data - from - live_component = “任何内容” >< /div>

需要注意一点： id很重要，因为事件会被推送至所有可能渲染的 Live 组件，所以如果您只想处理特定 Live 组件的此事件，则需要类似这样的代码：

定义 处理事件（ "file_removed" , ％{ ID ： ID }， 插座） 做   
	如果 ID == “my-components-unique-id” 做   
		# 处理事件  
	别的  
		# 请勿处理此事件，因为此事件的预期用途就是如此  
                # 用于另一个实时组件  
	结尾  
        { ：无回复， 插座}  
结尾

就是这样！

原文： https://zarar.dev/pushing-events-back-to-live-view-or-live-component-from-hooks/