Detailed explanation of the use of Vue h function

 // @returns {VNode}
h(
    // {String | Object | Function} tag
    // An HTML tag name, a component, an asynchronous component, or // a functional component.
    //
    // Required.
    'div',

    // {Object} props
    // Objects corresponding to attributes, props, and events.
    // This will be used in the template.
    //
    // Optional (During development, it is recommended to pass it. If there is no need to pass it, pass null)
    {},

    // {String | Array | Object} children
    // Sub VNodes, constructed using `h()`,
    // Or use a string to get a "text VNode" or // an object with slots.
    //
    // Optional.
    [
        'Some text comes first.',
        h('h1', 'A headline'),
        h(MyComponent, {
            someProp: 'foobar'
        })
    ]
)

 <script>
/* To set the style, you need to import it here. If you use the style tag, you cannot write scoped, which is not conducive to setting local styles, so it is not recommended*/
import "./style.css"
import { h, ref } from "vue";

export default {
    // How to write data // data() {
    // return {
    // counter: 0
    // }
    // },
    setup() {
        const counter = ref(0)
        return { counter }
    },
    /**
     * When using setup, you can also use this below. The import of render has this bound, so the following value should use this
     */
    render() {
        return h("div", null, [
            h("h1", null, `Current count: ${this.counter}`),
            h("button", { onClick: () => this.counter++, class: "button" }, "add 1"),
            h("button", { onClick: () => this.counter--, class: "button" }, "minus 1")
        ])
    }
}
</script>

 <script>
/* To set the style, you need to import it here. If you use the style tag, you cannot write scoped, which is not conducive to setting local styles, so it is not recommended*/
import "./style.css"
import { h, ref } from "vue";

export default {
    // How to write data // data() {
    // return {
    // counter: 0
    // }
    // },
    setup() {
        const counter = ref(0)
        return () => {
            return h("div", null, [
                h("h1", null, `Current count: ${counter.value}`),
                h("button", { onClick: () => counter.value++, class: "button" }, "add 1"),
                h("button", { onClick: () => counter.value--, class: "button" }, "minus 1")
            ])
        }
    }
}
</script>

 <script>
import { h, ref } from "vue";
import Test from "./components/Test.vue"
export default {
    setup() {
        return {}
    },
    render() {
        return h(Test, null, {
            // default corresponds to a function, default is the default slot default: props => h("span", null, "Content passed to the component by the parent:" + props.name)
        })
    }
}
</script>

 <script>
import { h } from "vue";

export default {
    /**
     * Receive the content passed in by the husband */
    render() {
        return h("div", null, [
            h("div", null, "I am a child component"),
            /**
             * Here we can judge whether others have passed in * You can also write null to display nothing * You can also pass in a parameter, using the function to pass the parameter */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈哈" }) : h("div", null, "I am the default value of the child component")
        ])
    }
}
</script>

 npm install @vue/babel-plugin-jsx -D

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

 <script>
import { ref } from 'vue'
export default {
    setup() {
        let counter = ref(0)
        return { counter }
    },
    render() {
        return (
            <div>
                <div>Use of JSX</div>
                <h2>Current number: {this.counter}</h2>
            </div>


        )
    }
}
</script>

 <script>
import { ref } from '@vue/reactivity'

export default {
    setup() {
        let counter = ref(0)
        function add() {
            counter.value++
        }
        function decrement() {
            counter.value--
        }
        return { counter, add, decrement }
    },
    render() {
        return (
            <div>
                <div>Use of JSX</div>
                <h2>Current number: {this.counter}</h2>
                <button onClick={this.add}>Add 1</button>
                <button onClick={this.decrement} >Decrement 1</button>
            </div>
        )
    }
}
</script>

 <script>
import { ref } from '@vue/reactivity'
import Test from "./components/Test.vue"
export default {
    setup() {
        let counter = ref(0)
        function add() {
            counter.value++
        }
        function decrement() {
            counter.value--
        }
        return { counter, add, decrement }
    },
    render() {
        return (
            <div>
                <div>Use of JSX</div>
                {/* If this block uses variables or methods in setup, add this */}
                <h2>Current number: {this.counter}</h2>
                <button onClick={this.add}>Add 1</button>
                <button onClick={this.decrement} >Decrement 1</button>
                <hr />
                <Test>
                    {/* Write the passed content here, that is, pass it into a slot*/}
                    {{ default: props => <p>I am passed from parent to child</p> }}
                </Test>
            </div>
        )
    }
}
</script>

 <script>
export default {
    /**
     * Receive the content passed in by the husband */
    render() {
        return (
            <div>
                <p>I am a component</p>
                {/* This piece may not be worn, and you need to display a default value. In this case, you need to use the ternary operator*/}
                {this.$slots.default()}
            </div>
        )
    }
}
</script>