如何在jquery中调用父函数

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

如果没有一些难看的hack，就不能从子对象访问父对象的作用域。然而，您似乎希望使用事件系统:在单击按钮时，您希望重新加载数据表。js有内置的事件系统，我们可以使用$dispatch函数来发出一个自定义事件，使用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>