名为Vue.js的javascript钩子

我正在尝试将Vue.js与velocity.js连接起来。本指南给出了一个示例，但未使用命名转换。当前我的转换如下所示：

<transition name="collapse">

collapseEnter, collapseEnterCancelled, etc.

---

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

AFAIK只有在将CSS类应用于转换时才使用该名称。它与javascript挂钩无关。因此，是的，您需要明确定义所有挂钩

你需要。但是，通过创建一个抽象组件来包装

，可以自动绑定这些钩子函数

这是一个骇客，但应该工作

首先，我们注册一个名为自动转换的组件：

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

（可以由

$root

引用）和

名称，以防需要：

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


你好

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