有时候未了方便操作组件，我们需要时用渲染函数来编写组件，再vue3可以再setup函数中返回内容来编写组件，但有时候我们直接使用了<script setup>标签应该如何写呢
第一种方式就是普通的渲染函数来编写 （推荐）
<script setup lang="ts">import { ref,h } from 'vue'const props = defineProps<{ text: string
}>()const handleClick = () => { console.log('click!!')
}const root=h('button',
{type:'button',onClick:handleClick,class:'btn btn-primary'},props.text)</script><template>
<root/> </template>其实把root函数写成render函数更直观
第二种方式是在tsx模式下，这个模式需要另外配置vue工程，不推荐使用
<script lang="tsx" setup> import { h } from 'vue'; const render = () => { return h('div', []); }; const jsxNode = () => { return <div> text </div>; }; </script> <template> <render /> <jsxNode /> </template>在渲染函数模式下，我们就可以更改父组件传过来的slots内容了，以达到先修改后生效的效果。
下面以修改slots中的class为例
slots = ()
animationClass = =()=> {
slotValue = slots.?.()
(slotValue) {
([] && [].&& []..class){
[]..class =[]..class .(animationClass)[]..class =[]..class + +animationClass}
}
slotValue[]}