Vue.js命名爲javascript鉤子

Question

我想用velocity.js掛鉤Vue.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

您需要。但是可以通過創建一個將包裝<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以防您需要：

​​

Answer 2

AFAIK該名稱僅在您將CSS類應用於轉換時使用。它與JavaScript鉤子無關。所以是的，你需要明確定義所有的鉤子。