如何传递参考到一个组件在高山js 3?

Question

我在alpine js中创建了一个名为user的组件，并在其中添加了一个init函数。像这样

<div x-data="user()" x-init="init($refs)">
<div x-ref="entry"></div>
</div>
<script type="text/javascript">
function user() {
return {
init: function($refs) {
console.log('run')
}
}
}
</script>

但是发生的是，init函数被调用了两次。然后，我了解到在Alpine v3 (https://alpinejs.dev/directives/init#auto-evaluate-init-method)中自动调用名为init的函数。如果添加x-init="init()", init将被调用两次。因此，我从HTML中删除了init()。

<div x-data="user()">
<div x-ref="entry"></div>
</div>

，它工作得很好。但是，现在$refs给出了一个错误说

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'entry')如何将$refs传递给init()函数?

Answer 1

这里的user()是一个Alpine.js组件，你也可以通过Alpine.data()全局方法创建它。在组件内部，你可以访问每个"魔法"。属性，如$refs，但必须使用this.前缀:

<div x-data="user">
<div x-ref="entry"></div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('user', () => ({
init() {
// Access "entry" ref
console.log(this.$refs.entry)
}
}))
})
</script>