如何在导入时将值传递给 init 方法？

Question

假设我有这样的组件：

'use strict';

export default () => ({
    selected: false,
    init(selectedIndex: -1)
    {

    }

});

我这样导入它（使用 AlpineJS 3）：

import Alpine from 'alpinejs'

window.Alpine = Alpine

window.Components = {};

import Tab from "./components/Tab";
window.Components.Tab = Tab;

Alpine.start();

现在如何将值传递给 init 方法？

当我有：

<div x-data="Components.Tab(0)">...</div>

值显然没有传递给 init 方法。

虽然文档中有如何register component from a bundle and info how to pass initial parameters的信息，但没有关于如何将初始参数传递给从包中注册的组件的信息

Answer 1

如您在 the documentation of the init function 中所见：

If your component contains an init() method

您不能向 init() 方法添加参数（注意两个括号表示没有参数）。

必须将参数添加到组件本身。所以你的组件定义应该是：

'use strict';

export default (initialSelected = -1) => ({
    selected: initialSelected,
    init()
    {

    }

});

顺便说一句，我注意到您的 selected 字段是布尔值，而您的 selectedIndex 参数是数字。在我上面更正的代码中，我只是对两者都使用了数字。

此外，您在代码中使用了它：

window.Components.Tab = Tab;

但是 the documentation you have linked to 说您需要使用 Alpine.data('Tab', Tab) 从捆绑包中注册。

如何在导入时将值传递给 init 方法？

How can I pass a value to init methods on import?

javascript

alpine.js