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[]}


  • 2023-08-19 18:57:08

    强制杀死nginx进程简单粗暴

    nginx: [error] open() "/run/nginx.pid" failed (2: No such file or directory),最简单的办法,杀死nginx进程,重启