javascript - Vue.js 命名为 javascript 钩子(Hook)

Question

我正在尝试将 Vue.js 与 velocity.js 连接起来。该指南给出了一个示例，但没有使用命名转换。目前我的过渡看起来像这样:

<transition name="collapse">

https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

Vue.js 文档中给出的示例设置了一个过渡元素，如下所示:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

有没有一种方法可以自动执行此操作，而无需事先进行所有设置？第二步当然是简单地拥有一个命名动画，而不必设置所有这些。

我的 Vue.js 组件中的方法最好是这样的:

collapseEnter, collapseEnterCancelled, etc.

但这似乎行不通。我真的必须设置所有指令还是有更简单的方法？

Answer 1

你需要。但是可以通过创建一个包装 <transition> 的抽象组件来自动绑定(bind)这些钩子(Hook)函数。 .

这是 hacky，但应该可以。

首先我们注册一个名为autoTransition的组件:

Vue.component('autoTransition', {
  props: ['name', 'vm'],
  functional: true,
  abstract: true,
  render (h, ctx) {
    return h('transition', {
      name: ctx.props.name,
      on: {
        'before-enter': ctx.props.vm.beforeEnter,
        'enter': ctx.props.vm.enter,
        // ... other hooks
      }
    }, ctx.children)
  }
})

您可以像正常转换一样使用它，但您现在可以简单地传递整个 vm 而不是传递所有的钩子(Hook)。 (可以通过 $root 引用)和 name如果您需要:

<auto-transition name="myTransition" :vm="$root">
  <h1 v-show="someBool">hello</h1>
</auto-transition>