如何在Alpine.data Alpine.js v3中传递参数？
如何在Alpine.data Alpine.js v3中传递参数？
提问于 2021-06-26 00:27:45
我现在使用的是阿尔卑斯的最新版本，即v3。
需要使用Alpine.data注册可重用组件。
这是alpinejs.js
import Alpine from 'alpinejs'
import form from './components/form'
window.Alpine = Alpine
Alpine.data('form', form)
Alpine.start()这就是我在组件/form.js中所拥有的
export default (config) => {
return {
open: false,
init() {
console.log(config)
},
get isOpen() { return this.open },
close() { this.open = false },
open() { this.open = true },
}
}这是html部分：
<div x-data="form({test:'test'})"></div>这是我在控制台中遇到的错误：
知道如何将参数传递给Alpine.data吗？
回答 2
Stack Overflow用户
发布于 2021-09-25 14:13:48
这种情况很可能发生在您将脚本作为模块导入之后。因此，您需要另一个处理数据初始化的脚本。
我使用的是vanillajs vite安装程序，下面是一个使用al菠萝‘s的工作实现：
index.html
<head>
<!-- Notice the type="module" part -->
<script type="module" src="/main.js" defer></script>
<script src="/initializer.js"></script>
</head>
<body x-data="greetingState">
<button @click="changeText">
<span x-text="message"></span>
</button>
<h2 x-text="globalNumber"></h2>
</body>main.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
// const globalNumber = 10; // Wrong placeinitialize.js
document.addEventListener('alpine:init', () => {
Alpine.data('greetingState', () => ({
message: "Hello World!",
changeText() {
this.message = "Hello AlpineJs!";
},
}));
});
const globalNumber = 10; // Correct place注意，侦听javascript模块中的alpine:init自定义事件会破坏应用程序。在本例中，如果您试图从一个类型为globalNumber的脚本中显示一个变量，也会发生同样的情况。
Stack Overflow用户
发布于 2022-07-07 09:25:14
我在这个问题上绊倒了，正在寻找答案，但现在我想出来了。也许对某人来说还是有用的..。
在注册数据组件时，必须定义参数：
document.addEventListener('alpine:init', () => {
window.Alpine.data('myThing', (param) => MyModule(param));
});现在你可以在你的模块中使用它.
export default (param) => ({
init() {
console.log(param);
}
});..。当您输入组件时
<div x-data="deliveryDate({ foo: 'bar' })"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68138234
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号