Vue.js 个名为 javascript 个钩子

Question

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

<transition name="collapse">

https://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

据我所知，该名称仅在您应用 CSS 类过渡时使用。它与 javascript 钩子无关。所以是的，您需要明确定义所有挂钩。

Answer 2

你需要。但是可以通过创建一个包装 <transition>.

的抽象组件来自动绑定这些钩子函数

这很老套，但应该可以。

首先我们注册一个名为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（可以被 $root 引用）和 name 如果您需要：

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

Vue.js 个名为 javascript 个钩子

Vue.js named javascript hooks

javascript

vue.js

vue-component

vuejs2