如何在 jquery alpine js 中调用父函数

Question

单击按钮 this.reloadDatatable() 未被调用时，我遇到了一个问题。如何从切换功能调用 reloadDatatable() 功能？下面是演示代码。谢谢。

<button type="button" @click="addSettingContainer.toggle();"></button>

Alpine.data('initOrderGrid', () => ({
    addSettingContainer: {
        toggle() {
            this.reloadDatatable();
        }
    },
    reloadDatatable: function() {
        console.log('a');
    },
}));

Answer 1

如果没有一些丑陋的技巧，您将无法从子对象访问父对象的范围。然而，您似乎想要使用一个事件系统：在单击按钮时您想要重新加载数据 table。 Alpine.js 有内置的事件系统，我们可以使用 $dispatch function to emit a custom event and the x-on 方法来捕获我们的自定义事件：

<div x-data="initOrderGrid"
     @reload-data-table.window="reloadDatatable">
</div>

<div x-data>
  <button @click="$dispatch('reload-data-table')">Reload data table</button>
</div>


<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('initOrderGrid', () => ({
    reloadDatatable() {
      console.log('Data table reloaded');
    }
  }))
})
</script>

如何在 jquery alpine js 中调用父函数

How to call parent function in jquery apline js

alpine.js