7、深入探索 Stimulus 框架的高级特性

深入探索 Stimulus 框架的高级特性

1. 事件参数解构与类型转换

在前端开发中，我们常常需要处理各种事件参数。在某些场景下，我们可以通过解构事件参数来直接使用其中的值。例如，我们有一个名为 data-favorite-toggle-text-param 的参数，通过事件参数我们可以恢复该值为 event.params.text ，也可以直接解构参数使用：

import { Controller } from "@hotwired/stimulus"
export default class FavoriteToggleController extends Controller {
  toggle({ params: { text } }): void {
    console.log(text)
  }
}

这里的解构语法表明我们期望一个带有 params 属性的对象，而 params 本身又有 text 属性，这样我们就可以在控制台日志中直接使用 text 。

需要注意的是，Stimulus 会根据参数的外观进行类型转换。如果看起来是数字，它会将对象类型转换为 Number ；如果看起来是 “true” 或 “false”，则会转换为 Boolean 。甚至可以传递完整对象的字符串表示，它也会进行转换。点击时 DOM 数据属