alpine.js data() x-数据指令

Question

我正在使用 alpine.js v3 和一些数据模块

import Foo from './foo';
import Bar from './bar';

window.Alpine = Alpine;

window.Alpine.data('data',  () => ({
    foo: Foo(),
    bar: Bar(),
}));

window.Alpine.start();

<body x-data="data">

每当我尝试访问数据时 <button @click="data.foo.doSomething()"> 我收到错误

Alpine Expression Error: data is not defined

我是否必须使用 x-data 指令添加它？

（更新）

以及如何从另一个组件访问此数据，例如获取Foo组件的status，调用Bar:

的方法

window.Alpine.bind('SomeButton', (name) => ({
    'x-init'(){
        const data = window.Alpine.$data;
            
        if(data.foo.status === 'open'){
            data.bar.doSomething();
        }
    }
});

Answer 1

用Alpine.data()定义一个组件。之后，您可以直接访问通过 x-data 应用它的元素内组件的所有属性。这里 data 是组件，因此您不必在其属性前加上 data.:

<div x-data="data">
  <button @click="foo.doSomething()">Call doSomething()</button>
</div>

回答您的第二个问题：由于您有一个应用于最顶层元素 (body) 的“全局”组件，因此每个子组件都可以访问该父组件的属性。所以在 SomeButton "bind-object" 类型的组件中，我们可以使用 this. 前缀在组件的定义中访问它们。

window.Alpine.bind('SomeButton', () => ({
    '@click'() {
        if (this.foo.status === 'open') {
            this.bar.doSomething()
        }
    }
})

这里我们将逻辑附加到 click-event：如果状态为 'open'，我们调用 bar.doSomething()。

<div x-data="data">
    <button x-bind="SomeButton">Call bar.doSomething() if status is 'open'</button>
</div>

alpine.js data() x-数据指令

alpine.js data() x-data directive

javascript

alpine.js