// @returns {VNode}
h(
    // {String | Object | Function} tag
    // 一個(gè) HTML 標(biāo)簽名、一個(gè)組件、一個(gè)異步組件、或
    // 一個(gè)函數(shù)式組件。
    //
    // 必需的。
    'div',

    // {Object} props
    // 與 attribute、prop 和事件相對(duì)應(yīng)的對(duì)象。
    // 這會(huì)在模板中用到。
    //
    // 可選的(在開發(fā)時(shí)。建議傳，實(shí)在沒有傳的時(shí)候，傳入 null)
    {},

    // {String | Array | Object} children
    // 子 VNodes, 使用 `h()` 構(gòu)建,
    // 或使用字符串獲取 "文本 VNode" 或者
    // 有插槽的對(duì)象。
    //
    // 可選的。
    [
        'Some text comes first.',
        h('h1', 'A headline'),
        h(MyComponent, {
            someProp: 'foobar'
        })
    ]
)

<script>
/* 設(shè)置樣式需要在這引入，如果使用style標(biāo)簽，則不能寫scoped，不利于設(shè)置局部樣式，所以不建議 */
import "./style.css"
import { h, ref } from "vue";

export default {
    // data 的寫法
    // data() {
    //     return {
    //         counter: 0
    //     }
    // },
    setup() {
        const counter = ref(0)
        return { counter }
    },
    /**
     * 使用setup的時(shí)候，下面也可以用this，引入render有綁定this，所以下面取值，要用this
     */
    render() {
        return h("div", null, [
            h("h1", null, `當(dāng)前計(jì)數(shù)：${this.counter}`),
            h("button", { onClick: () => this.counter++, class: "button" }, "加 1"),
            h("button", { onClick: () => this.counter--, class: "button" }, "減 1")
        ])
    }
}
</script>

<script>
/* 設(shè)置樣式需要在這引入，如果使用style標(biāo)簽，則不能寫scoped，不利于設(shè)置局部樣式，所以不建議 */
import "./style.css"
import { h, ref } from "vue";

export default {
    // data 的寫法
    // data() {
    //     return {
    //         counter: 0
    //     }
    // },
    setup() {
        const counter = ref(0)
        return () => {
            return h("div", null, [
                h("h1", null, `當(dāng)前計(jì)數(shù)：${counter.value}`),
                h("button", { onClick: () => counter.value++, class: "button" }, "加 1"),
                h("button", { onClick: () => counter.value--, class: "button" }, "減 1")
            ])
        }
    }
}
</script>

<script>
import { h, ref } from "vue";
import Test from "./components/Test.vue"
export default {
    setup() {
        return {}
    },
    render() {
        return h(Test, null, {
            // default 對(duì)應(yīng)的是一個(gè)函數(shù)，default是默認(rèn)插槽
            default: props => h("span", null, "父?jìng)魅氲浇M件中的內(nèi)容：" + props.name)
        })
    }
}
</script>

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

export default {
    /**
     * 接收夫傳入的內(nèi)容
     */
    render() {
        return h("div", null, [
            h("div", null, "我是子組件"),
            /**
             * 在這判斷別人是否傳入
             * 也可以寫 null，啥也不展示
             * 也可以在傳入一個(gè)參數(shù)，使用的是 函數(shù)傳參
             */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div", null, "我是子組件的默認(rèn)值")
        ])
    }
}
</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>JSX的使用</div>
                <h2>當(dāng)前數(shù)字：{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>JSX的使用</div>
                <h2>當(dāng)前數(shù)字：{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.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>JSX的使用</div>
                {/* 如果這塊使用setup里面的變量、方法 要加this */}
                <h2>當(dāng)前數(shù)字：{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >減 1</button>
                <hr />
                <Test>
                    {/* 這個(gè)里面寫入傳入的內(nèi)容,也就是傳入一個(gè)插槽 */}
                    {{ default: props => <p>我是父?jìng)魅胱拥?lt;/p> }}
                </Test>
            </div >
        )
    }
}
</script>

<script>
export default {
    /**
     * 接收夫傳入的內(nèi)容
     */
    render() {
        return (
            <div>
                <p>我是組件</p>
                {/* 這塊也有可能沒穿，你要顯示一個(gè)默認(rèn)值，這個(gè)時(shí)候，你就要用三元運(yùn)算符 */}
                {this.$slots.default()}
            </div>
        )
    }
}
</script>