目錄

• 一、認識
• 二、使用
• 1、h() 引數
• 2、簡單的使用
• 3、實現一個PKlNmAR計數器案例
• 4、函式元件和插槽的使用
• 三、x的使用
• 1、jsx的認識
• 2、下載Babel外掛支援（現在貌似腳手架直接支援）
• 3、配置babel
• 4、簡單的使用
• 5、計數器案例
• 6、元件和插槽的使用

一、認識

文件：https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91

​ h() 到底會返回什麼呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，因為它所包含的資訊會告訴 Vue 頁面上需要渲染什麼樣的節點，包括及其子節點的描述資訊。我們把這樣的節點描述為“虛擬節點 (virtual node)”，也常簡寫它為 VNode 。“虛擬 DOM”是我們對由 Vue 元件樹建立起來的整個 VNode 樹的稱呼。

二、使用

文件：https://v3.cn.vuejs.org/guide/render-function.html#h-%E5%8F%82%E6%95%B0

1、h() 引數

h() 函式是一個用於建立 VNode 的實用程式。也許可以更準確地將其命名為 createVNode()，但由於頻繁使用和簡潔，它被稱為 h() 。它接受三個引數：

// @returns {VNode}
h(
    // {String | Object | Function} tag
    // 一個 HTML 標籤名、一個元件、一個非同步元件、或
    // 一個函式式元件。
    //
    // 必需的。
    'div',// {Object} props
    // 與 http://www.cppcns.com
 
attribute、prop 和事件相對應的物件。
    // 這會在模板中用到。
    //
    // 可選的(在開發時。建議傳，實在沒有傳的時候，傳入 null)
    {},// {String | Array | Object} children
    // 子 VNodes,使用 `h()` 構建,// 或使用字串獲取 "文字 VNode" 或者
    // 有插槽的物件。
    //
    // 可選的。
    [
        'Some text comes first.',h('h1','A headline'),h(MyComponent,{
            someProp: 'foobar'
        })
    ]
)

2、簡單的使用

3、實現一個計數器案例

<script>
/* 設定樣式需要在這引入，如果使用style標籤，則不能寫scoped，不利於設定區域性樣式，所以不建議 */
import "./style."
import { h,ref } from "vue";

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

修改成純setup的寫法：

<script>
/* 設定樣式需要在這引入，如果使用style標籤，則不能寫scoped，不利於設定區域性樣式，所以不建議 */
import "./style.css"
import { h,ref } from "vue";

export default {
    // data 的寫法
    // data() {
    //     return {
    //         counter: 0
    //     }
    // },setup() {
        const counter = ref(0)
        return () => {
            return h("div",[
                h("h1",`當前計數：${counter.value}`),{ onClick: () => counter.value++,{ onClick: () => counter.value--,"減 1")
            ])
        }
    }
}
</script>

4、函式元件和插槽的使用

1）父元件

<script>
import { h,ref } from "vue";
import Test from "./components/Test.vue"
export default {
    setup() {
        return {}
    },render() {
        return h(Test,{
    www.cppcns.com        // default 對應的是一個函式，default是預設插槽
            default: props => h("span","父傳入到元件中的內容：" + props.name)
        })
    }
}
</script>

2）子元件

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

export default {
    /**
     * 接收夫傳入的內容
     */
    render() {
        return h("div",[
            h("div","我是子元件"),/**
             * 在這判斷別人是否傳入
             * 也可以寫 null，啥也不展示
             * 也可以在傳入一個引數，使用的是 函式傳參
             */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈" }) : h("div","我是子元件的預設值")
        ])
    }
}
</script>

注：在專案中，如果你像上面一樣寫程式碼，就太苦逼了，所以這個時候就要用 JSX。

三、jsx的使用

1、jsx的認識

jsx我們通常會通過Babel來進行轉換（React編寫的jsx就是通過babel轉換的）；

對於Vue來說，我們只需要在Babel中配置對應的外掛即可；

文件：https://v3.cn.vuejs.org/guide/render-function.html#jsx

2、下載Babel外掛支援vue（現在貌似腳手架直接支援）

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

3、配置babel

1）在根目錄下建立 .babel.config.js

2）在.babel.config.js 裡面加入，如下程式碼

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

4、簡單的使用

<script>
import { ref } from 'vue'
export default {
    setup() {
        let counter = ref(0)
        return { counter }
    },render() {
        return (
            <div>
                <div>JSX的使用</div>
                <h2>當前數字：{this.counter}</h2>
            </div>


        )
    }
}
</script>

5、計數器案例

<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>當前數字：{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >減 1</button>
            </div >
        )
    }
}
</script>

6、元件和插槽的使用

1）父元件

<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,render() {
        return (
            <div>
                <div>JSX的使用</div>
                {/* 如果這塊使用setup裡面的變數、方法 要加this */}
                <h2>當前數字：{this.counter}</h2>
                <button onClick={this.add}>加 1</button>
                <button onClick={this.decrement} >減 1</button>
                <hr />
                <Test>
                    {/* 這個裡面寫入傳入的內容,也就是傳入一個插槽 */}
                    {{ default: props => <p>我是父傳入子的</p> }}
                </Test>
            </div >
        )
    }
}
</script>

2）子元件

<script>
export default {
    /**
     * 接收夫傳入的內容
     */
    render() {
        return (
            <div>
                <p>我是元件</p>
                {/* 這塊也有可能沒穿，你要顯示一個預設值，這個時候，你就要用三元運算子 */}
                {this.$slots.default()}
            </div>
        )
    }
}
</script>

注：如果你要h函式來寫元件，請仔細檢視文件，以上講解，只是入門級。

到此這篇關於Vue h函式的使用詳解的文章就介紹到這了,更多相關Vue h函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！