vue3.0版本render函数渲染动画标签 Transition
文章 1181 0 0 0
发布时间:2021年11月24日

概述

vue2.0迁移vue3.0的时候用到了render函数方式去渲染标签,但是当使用内置动画标签去渲染的时候,发现一直渲染不成功,后来发现问题特此记录。

问题

在我们使用vue3的组合apisetup去创建组件的时候,我们用到render函数,去渲染,而这个函数是我们在vue2.0当中去使用的,但是我们现在使用的是vue3.0中的setup组合式api,那么官网也提供了渲染的方法,如下

import { h, computed, ref, reactive } from 'vue'
export default {
    name: 'ZmzTooltip',
    setup(props) {
        const count = ref(0)
        const increment = () => ++count.value
        return () => h('div', count.value)
    }
};

这样我们就渲染出来一个div,div的内容就是一个数值

我一想这动画标签是不是也是这样做的呢代码如下

import { h, computed, ref, reactive } from 'vue'
export default {
    name: 'ZmzTooltip',
    setup(props) {
        const count = ref(0)
        const increment = () => ++count.value
        return () => h('transition', count.value)
    }
};

但是我们看到前台的标签的时候发现transition没有渲染,那么我们就不能使用这样的方法了。
经过查看vue3的官方文档,在迁移策略哪里我们看到了Transition。需要我们引入,代码如下我们测试了一下结果渲染成功。

import { h, Transition, computed, ref, reactive } from 'vue'
export default {
    name: 'ZmzTooltip',
    setup(props, { expose }) {
        const count = ref(0)
        const increment = () => ++count.value
        return () => h(Transition, count.value)
    }
};
评论专区
Q群
Q群
Q群
反馈
纠错
App