Alpine.bind

Alpine.bind() 提供了一种在应用程序中重用 x-bind 对象的方法。

Before

<button :disabled="shouldDisable"
        type="button"
        x-data="{
         shouldDisable: false,
         doSomething() {
            console.log('Before');
         }
        }"
        @click="doSomething()">Click Me
</button>

After

<button x-bind="SomeButton" x-data></button>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.bind('SomeButton', () => ({
    'x-data'() {
      return {
        shouldDisable: false,
        doSomething() {
          console.log('After')
        }
      };
    },


    type: 'button',
    'x-text'() {
      return 'Click Me';
    },

    '@click'() {
      console.log(this.$el); // 获取 DOM 元素
      this.doSomething()
    },

    ':disabled'() {
      return this.shouldDisable
    },
  }))
})
</script>

在方法内部可以通过 this.$el 获取 DOM 元素。