如何通过普通JavaScript调用Alpine.data()中定义的函数？

首先得明确：Alpine.data()定义的是组件的方法模板，它不会直接把方法暴露成全局函数，只有当这个组件被挂载到DOM元素上（比如给元素加x-data="utils"），才会生成对应的实例，方法属于这个实例的属性。所以直接调用func()或者Alpine.func()肯定不行，可用下面两种方法解决：

方法1：通过DOM组件实例调用 #

先确保页面里有挂载了该组件的DOM元素，然后通过Alpine的API获取实例再调用方法：

<!-- 页面中挂载utils组件 -->
<div x-data="utils" id="utils-comp"></div>

// 等待DOM加载完成（避免找不到目标元素）
document.addEventListener('DOMContentLoaded', () => {
    // 获取挂载组件的DOM元素
    const el = document.getElementById('utils-comp');
    // 获取Alpine组件实例
    const utilsInstance = Alpine.getComponent(el);
    // 调用目标方法
    utilsInstance.func();
});

方法2：抽离函数实现全局复用 #

如果想让函数既能在Alpine组件里用，又能直接全局调用，最省事的方式是把函数单独定义，再在Alpine.data()里引用：

// 单独定义全局可用的函数
function sayHello() {
    console.log('Hello, world!');
}

// 在Alpine组件模板里引用这个函数
Alpine.data('utils', () => ({
    func: sayHello
}))

// 直接全局调用
sayHello();
// Alpine组件里也能正常使用：x-on:click="func()"

注意事项 #

• 用方法1时，必须确保DOM已经加载完成，且目标元素确实挂载了对应的x-data组件，否则Alpine.getComponent()会返回null。
• 如果你的Alpine是延迟加载或用模块方式引入，要确保Alpine对象已经在全局环境中可用。

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