以 JSX 的方式来编写 Vue3 代码

创建项目

1. 使用 vue ui 创建 vue3 项目

2. 安装 vue-router vuex @vue/cli-plugin-typescript, @vue/babel-plugin-jsx

3. 修改 babel.config.js 文件

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: ["@vue/babel-plugin-jsx"]
}

3. 修改全部 .vue -> .jsx, 模板如下

import {defineComponent} from 'vue';

export default defineComponent({
    name: "",
    setup() {
        return () => (
            <>

            </>
        )
    }
})

路由

RouterView

和 <router-view/> 是一样的用法

import {defineComponent} from 'vue';
import {RouterView} from 'vue-router'

export default defineComponent({
    setup() {
        return () => <RouterView/>
    }
})

RouterLink

import {defineComponent} from 'vue';
import {RouterLink} from 'vue-router'

export default defineComponent({
    name: "RouterLinkDemo",
    setup() {
        return () => <RouterLink to={'/home'}/>
    }
})

Fragment

一个组件返回多个元素,和 React.Fragment 差不多
短语法 <></>

import {defineComponent, Fragment} from 'vue';

export default defineComponent({
    name: "FragmentDemo",
    setup() {
        const a = (
            <>
                <div>A</div>
                <div>A</div>
            </>
        )
        return () => (
            <Fragment>
                {a}
                <div>b</div>
            </Fragment>
        )
    }
})

插槽

带有插槽的组件

创建 ASlotDemo 组件,ASlotDemo 有具名插槽 header,范围插槽 footer

在模板中定义插槽需要用到 <slot/>, jsx 中使用renderSlot函数渲染插槽

renderSlot 接收 Slots, 插槽名,插槽数据,进行渲染

import {defineComponent, renderSlot} from "vue";

export default defineComponent({
    name: "ASlotDemo",
    setup(props, {slots}) {
        const {default: defaultSlot, header, footer} = slots;
        const footerData = {
            text: "2020-1-20"
        }
        return () => (
            <>
                <div>
                    {
                        header !== undefined ? renderSlot(slots, 'header') : "默认 header"
                    }
                </div>
                <div>
                    {
                        defaultSlot !== undefined ? renderSlot(slots, 'default') : "没有传递默认插槽"
                    }
                </div>
                <div>
                    {
                        footer !== undefined ? renderSlot(slots, 'footer', footerData) : "默认 footer" + footerData.text
                    }
                </div>
            </>
        )
    }
})

使用

在使用范围插槽时,可以定义个接口,获得语法提示

import {defineComponent} from "vue";
import ASlotDemo from "@/components/slot/ASlotDemo";

interface IFooterSlotData {
    text: string;
}

export default defineComponent({
    name: "BSlotDemo",
    setup() {
        return () => (
            <>
                <ASlotDemo>
                    我是: BSlotDemo
                </ASlotDemo>
                <ASlotDemo>
                </ASlotDemo>

                <ASlotDemo v-slots={{
                    default: () => <div>slots使用方式1</div>,
                    header: () => <span>header1</span>,
                }}/>
                
                <ASlotDemo>
                    {{
                        default: () => <div>slots使用方式2</div>,
                        header: () => <span>header2</span>,
                    }}
                </ASlotDemo>

                <ASlotDemo v-slots={{
                    default: () => <div>范围插槽使用</div>,
                    header: () => <span>范围插槽header</span>,
                    footer: (value: IFooterSlotData) => <span>获取范围插槽的值: {value.text}</span>,
                }}/>
            </>
        )
    }
})

emits

在父组件使用时,必须 on + 事件名(事件名第一个字母必须大写)

// AEmitsDemo.jsx
import {defineComponent} from 'vue';

export default defineComponent({
    name: "AEmitsDemo",
    emits: ['click', 'getDate'],
    setup(props, {emit}) {
        const click = () => {
            console.log('点击++++++++')
            emit("click")
        }
        return () => (
            <>
                <div onClick={click}>点击</div>
                <div onClick={() => emit("getDate", 10)}>获取数据</div>
            </>
        )
    }
})

// BEmitsDemo.jsx
import {defineComponent} from 'vue';
import AEmitsDemo from "@/components/emits/AEmitsDemo";

export default defineComponent({
    name: "BEmitsDemo",
    setup() {
        const click = () => {
            console.log('点击---------')
        }
        const getData = (value: number) => {
            console.log(value);
        }
        return () => <AEmitsDemo onClick={click} onGetData={getData}/>
    }
})

源码: https://github.com/NikolasSky/vue3-tsx