如何将 refs 传递给 alpine 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>

如何将 refs 传递给 alpine js 3 中的组件？

How to pass refs to a component in alpine js 3?

alpine.js