今天在看官网的文档,看到可复用的过渡的时候,官网上说可以用函数式组件代替,如下:
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
当时我是自己写的例子,没有复制官网的代码,没想到遇到大坑。
我发现我做的例子的过渡效果没有生效,打开调试工具检查元素,发现居然渲染的是一个functionalfade标签,里面插槽的内容正确,但这个functionalfade很是奇怪,我注册的时候写的是FunctionalFade,而且Vue也支持驼峰写法,到时会自动转成用横杠连接。问题就在这里,functionalfade没有横杠连接。
在不断的查找资料,翻阅文档后,我突然发现,函数式组件只是一个函数,这个应该是关键点,虽然我不太了解这到底是什么,而且官网的函数式组件在注册组件的时候也没有使用驼峰命名法,我想可能函数式组件和组件不是同一个东西,组件中特殊支持的驼峰写法也许不能在函数式组件中用,必须遵循html的规范。
于是我修改了组件的名字,关键代码如下:
new Vue({
components: {
'functional-fade': FunctionalFade
}
})
刷新,发现bug解决。一个下午就这样浪费了。