javascript - 如何在 VueJS SFC 中的数据、计算、方法中使用 JSX

Question

我正在设置一个用于学习的应用程序。从 React 开始，我知道如何使用 JSX，当我在 VueJS 中编写时，我不知道如何在这里使用它。

<template>
    <div>
        <h1>{{this.message}}</h1> <!--Work-->
        <h1>{{this.messageJSX}}</h1> <!--Not working-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
            }
        }
    }
</script>

现在我得到了这个错误:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Vue'
    |     property '$options' -> object with constructor 'Object'
    |     property 'router' -> object with constructor 'VueRouter'
    --- property 'app' closes the circle"

谢谢。

Answer 1

我找到了一种不使用 JSX 的方法。谢谢大家(:

你知道使用像下面组件这样的对象的名称吗？

<template>
    <div>
        <h1>{{message}}</h1> <!--Work-->
        <h1>{{messageJSX}}</h1> <!--Not working-->
        <component :is="messageComponent"></component> <!--Work-->
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                message: "Hello, JSX!", // Work
                messageJSX: <span>Hello, JSX!</span>, // Not Working
                messageComponent: {
                    template: `<span>Work with all other components, not just span</span>`
                }
            }
        }
    }
</script>