vue3中再<script setup>标签下使用渲染函数render方法

2023-10-23 15:33:40

有时候未了方便操作组件,我们需要时用渲染函数来编写组件,再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[]}


  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解,现在主流的ORM框架很多,比如OrmLite,GreenDao,Active Android,Realm等等,这些框架每个都有自己的优点和缺点,大家完全可以根据自己项目的实际需求进行选择,下面开始进入今天的数据库模块的介绍。

  • 2018-11-17 21:05:48

    Android ANR发生的原因总结和解决办法

    ANR的全称是application not responding,是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR。一般地,这时往往会弹出一个提示框,告知用户当前xxx未响应,用户可选择继续等待或者Force Close。

  • 2018-11-17 21:08:09

    Android 单个应用的内存限制

    获取Android手机应用内存大小 手机不同其性能也不同,手机本身内存可能有大有小,所以针对每个应用的内存大小也不相同。

  • 2018-11-17 21:11:14

    Android中App可分配内存的大小

     结果:(1)未设定属性android:largeheap = "true"时,可以申请到的最大内存空间为221M。      (2)设定属性android:largeheap = "true"时, 可以申请的最大内存空间为478M,是原来的两倍多一些。

  • 2018-11-17 22:44:53

    LeakCanary,30分钟从入门到精通

    在性能优化中,内存是一个不得不聊的话题;然而内存泄漏,显示已经成为内存优化的一个重量级的方向。当前流行的内存泄漏分析工具中,不得不提的就是LeakCanary框架;这是一个集成方便, 使用便捷,配置超级简单的框架,实现的功能却是极为强大的。

  • 2018-11-17 22:53:01

    gc for alloc freed

    在数组中选择图片然后显示,然后。。。logcat不断显示GC回收。最后程序黑屏。