我们如何在 Alpine.js v3 中将参数传递给 Alpine.data？答案

【问题标题】：How can we pass parameters to Alpine.data in Alpine.js v3?我们如何在 Alpine.js v3 中将参数传递给 Alpine.data？
【发布时间】：2021-09-09 06:36:41
【问题描述】：

我现在使用的是最新版本的 Alpine v3。

制作可重用组件需要使用Alpine.data注册。

这是alpinejs.js

import Alpine from 'alpinejs'
import form from './components/form'

window.Alpine = Alpine

Alpine.data('form', form)

Alpine.start()

这是我在 components/form.js 中的内容

export default (config) => {
  return {
    open: false,
    init() {
      console.log(config)
    },
    get isOpen() { return this.open },
    close() { this.open = false },
    open() { this.open = true },
  }
}

这是html部分：

<div x-data="form({test:'test'})"></div>

这是我在控制台中遇到的错误：

知道如何将参数传递给 Alpine.data 吗？

【问题讨论】：

我也想知道官方的方法，因为在使用 Alpine v2 之前，我使用带参数的函数来生成和返回所需的 x-data 对象。目前使用 V3，我认为您可以在组件中定义 start(config) 函数并使用 <div x-data="form" x-init="start({test:'test'})"></div>
遇到了同样的事情。你解决了吗？

标签： alpine.js

【解决方案1】：

这很可能发生在您将脚本作为模块导入之后。因此，您需要另一个脚本来处理数据的初始化。

我正在使用 vanillajs vite 设置，这是 alpinejs 的有效实现：

index.html

<head>
    <!-- Notice the type="module" part -->
    <script type="module" src="/main.js" defer></script>

    <script src="/initializer.js"></script>
</head>

<body x-data="greetingState">
  <button @click="changeText">
    <span x-text="message"></span>
  </button>

  <h2 x-text="globalNumber"></h2>
</body>

main.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

// const globalNumber = 10; // Wrong place

initialize.js

document.addEventListener('alpine:init', () => {
  Alpine.data('greetingState', () => ({
    message: "Hello World!",

    changeText() {
      this.message = "Hello AlpineJs!";
    },
  }));
});

const globalNumber = 10; // Correct place

请注意，在 javascript 模块中侦听 alpine:init 自定义事件会破坏应用程序。如果您尝试显示模块类型脚本中的变量，也会发生同样的情况，在此示例中为 globalNumber。

【讨论】：