如何在 <script setup> Vue3 中使用渲染函数

Question

我使用 Vue 3.1.1

我在实验阶段使用单文件组件的脚本设置。使用脚本设置，我了解defineProps、defineEmit和useContext，但我不了解如何使用render函数。

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps<{
    text: string
}>()

const handleClick = () => {
    console.log('click!!')
}

// Render function...

/* The template I want to create.
    <button
        class="btn btn-primary"
        type="button"
        @click="handleClick"
    >
        {{ props.text }}
    </button>
*/
</script>

Answer 1

尝试使用 h 函数创建您的元素，然后将其呈现在模板部分中，如下所示：

<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>

DEMO

Answer 2

您可以试试额外的普通脚本。

<script lang="tsx" setup>
import { defineProps, defineExpose } from 'vue'

const props = defineProps<{
    text: string
}>()

const handleClick = () => {
    console.log('click!!')
}
defineExpose({
  handleClick,
  // other data,method
})
</script>

<script lang="tsx">
import { defineComponent } from 'vue'

export default defineComponent({
  render() {
    return (
      <button
        class="btn btn-primary"
        type="button"
        onClick={this.handleClick}
      >
        {{ this.text }}
      </button>
    )
  }
})
</script>

除道具外的任何数据、方法都应使用 defineExpose 公开。

顺便说一句，设置脚本和普通脚本应该具有相同的 lang 属性。

Answer 3

试一试。

<script lang="tsx" setup>
  import { h } from 'vue';

  const render = () => {
    return h('div', []);
  };

  const jsxNode = () => {
    return <div> text </div>;
  };
</script>
<template>
  <render />
  <jsxNode />
</template>

如何在 <script setup> Vue3 中使用渲染函数

How to use render function in <script setup> Vue3

javascript

vue.js

vuejs3

vue-composition-api

vue-script-setup