Блог

Предположим, у меня есть такой компонент:

 '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 методу.

Хотя в документах есть информация о том, как зарегистрировать компонент из пакета, и информация о том, как передать начальные параметры, нет информации о том, как передать начальные параметры компоненту, зарегистрированному из пакета

Как вы можете видеть в документации по функции инициализации:

Если ваш компонент содержит init() метод

вы не можете добавить параметры в init() метод (обратите внимание на две квадратные скобки, которые означают отсутствие параметров).

Параметры должны быть добавлены к самому компоненту. Таким образом, ваше определение компонента должно быть:

 'use strict';

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

    }

});
 

Кстати, я заметил, что ваше selected поле является логическим, в то время как ваш selectedIndex параметр числовой. В моем исправленном коде выше я просто использовал числовые значения для обоих.

Кроме того, вы использовали это в своем коде:

 window.Components.Tab = Tab;
 

Но в документации, на которую вы ссылаетесь, говорится, что вам нужно Alpine.data('Tab', Tab) зарегистрироваться из пакета.