Write Vue3 code JSX style

Create a project

1. Create a VUE3 project using the VUE UI

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

3. Modify the babel.config.js file

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

3. Modify all. Vue ->. JSX. The template is as follows

import {defineComponent} from 'vue';

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

            </>)}})Copy the code

routing

RouterView

This is the same as

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

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

RouterLink

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

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

Fragment

A component returns multiple elements, similar to 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>)}})Copy the code

slot

Components with slots

Create an ASlotDemo component with a named slot header and a range slot footer

is used to define slots in templates, and renderSlot is used to render slots in JSX

RenderSlot takes Slots, slot name, slot data and renders it

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') : "Default header"}</div>
                <div>{ defaultSlot ! == undefined ? RenderSlot (slots, 'default') : "No default slot passed"}</div>
                <div>{ footer ! == undefined ? RenderSlot (slots, 'footer', footerData) : "default footer" + footerdata.text}</div>
            </>)}})Copy the code

use

When using a range slot, you can define an interface to get syntax hints

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

interface IFooterSlotData {
    text: string;
}

export default defineComponent({
    name: "BSlotDemo".setup() {
        return () = > (
            <>
                <ASlotDemo>I am a: BSlotDemo</ASlotDemo>
                <ASlotDemo>
                </ASlotDemo>

                <ASlotDemo v-slots={{
                    default:() = > <div>Slots usage 1</div>,
                    header: () => <span>header1</span>,}} / ><ASlotDemo>
                    {{
                        default: () => <div>Slots usage 2</div>,
                        header: () => <span>header2</span>,}}</ASlotDemo>

                <ASlotDemo v-slots={{
                    default:() = > <div>Range slot usage</div>,
                    header: () => <span>Range slot header</span>,
                    footer: (value: IFooterSlotData) => <span>Get the value of the range slot: {value.text}</span>,}} / ></>)}})Copy the code

emits

When used by the parent component, must on + event name (the first letter of event name must be capitalized)

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

export default defineComponent({
    name: "AEmitsDemo".emits: ['click'.'getDate'].setup(props, {emit}) {
        const click = () = > {
            console.log('click + + + + + + + +')
            emit("click")}return () = > (
            <>
                <div onClick={click}>Click on the</div>
                <div onClick={()= >Emit ("getDate", 10)}> fetch data</div>
            </>)}})// BEmitsDemo.jsx
import {defineComponent} from 'vue';
import AEmitsDemo from "@/components/emits/AEmitsDemo";

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

Source: github.com/NikolasSky/…