如何在 <script setup> Vue3 中使用渲染功能

问题描述

我使用 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>

解决方法

您应该将 html 部分移动到模板部分：

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

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

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

</script>
<template>
<button
        class="btn btn-primary"
        type="button"
        @click="handleClick"
    >
        {{ props.text }}
</button>
</template>