快捷導(dǎo)航

vue3中h函數(shù)的常用使用方式匯總

更新時間：2022年08月18日 09:40:56 作者：鐵皮飯盒

其實h()函數(shù)和createVNode()函數(shù)都是創(chuàng)建dom節(jié)點,他們的作用是一樣的,下面這篇文章主要給大家介紹了關(guān)于vue3中h函數(shù)的常用使用方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

一般情況下每個vue組件都用"<template>"寫html, 但實際還可以在js代碼中通過render函數(shù)生成dom. 最主要常見組件庫也需要配合"h"使用.

render

render是組件的一個選項, 他的返回值會被作為組件的DOM結(jié)構(gòu).

<script>
import { defineComponent} from "vue";
export default defineComponent({
  render(){
    return '123456789'
  }
});
</script>

試試插入html:

<script>
import { defineComponent } from "vue";
export default defineComponent({
  render(){
    return '<h2>123456789</h2>'
  }
});
</script>

可以看到html標(biāo)簽被當(dāng)做字符串渲染了,** 并沒有生成h2標(biāo)簽. 如何正確插入h2標(biāo)簽?zāi)?**

VNode

如果想插入DOM就要用到"VNode", VNode是vue對頁面DOM節(jié)點的描述, 其是一個Object類型.

h

結(jié)構(gòu)這么復(fù)雜的"VNode"肯定不是自己拼寫的, 官方提供了"h"函數(shù), 可以幫助我們生成"VNode"

<script>
import { defineComponent, h } from "vue";
export default defineComponent({
  render() {
    const props = { style: { color: "red" } };
    return h("h2", props, "123456789");
  },
});
</script>

這次生成了真正"h2":

"h"函數(shù)的第1個參數(shù)是"標(biāo)簽名", 第2個是"屬性", 在這個例子里可以理解為html的所有屬性, 第3個是"內(nèi)容". "內(nèi)容"不僅僅可以是字符串, 還可以是"VNode"或2者混合:

<script>
import { defineComponent, h } from "vue";
export default defineComponent({
  render() {
    const props = { style: { color: "red" } };
    const small = h("small", "副標(biāo)題");
    return h("h2", props, ["123456789", small]);
  },
});
</script>

如果實際只傳入2個參數(shù), 那么第二2參數(shù)就會作為內(nèi)容, 比如這里的"small".

渲染組件

"h"還可以渲染"組件", 這一下靈活度就上來了, 假設(shè)我們有一個"switch"組件, 其支持<switch v-model:checked="checked"/>.

<script>
import { defineComponent, h } from "vue";
import ASwitch from "../components/ASwitch.vue";
export default defineComponent({
  components: { ASwitch },

  data() {
    return { checked: false };
  },

  render() {
    return h(ASwitch)
  }
});
</script>

這里注意第1個參數(shù)還支持傳入組件對象. 效果如下:

但是你可以發(fā)現(xiàn)了, "switch"雖然顯示了, 但是點擊后按鈕并不能切換.

h函數(shù)中使用"v-model"

上面不能切換是因為沒有像在模板中那樣使用"v-model".

 <a-switch v-model:checked="checked"></a-switch>

回憶下前面講過的"自定義雙向數(shù)據(jù)綁定"課中講的如何實現(xiàn)"v-model", 對比下可以發(fā)現(xiàn)上面"h"中,沒有定義"props"和"v-on事件監(jiān)聽", 怎么寫呢? 先說一個重要的知識點: 組件上的事件監(jiān)聽其實也可通過"props"傳入:

<a-switch @update:checked="onChange"></a-switch>
<!-- 等價寫法: -->
<a-switch :onUpdate:checked="onChange"></a-switch>

所有的自定義事件, 都可以通過":on"前綴通過props傳入. 所以在"h"中可以通過第2個參數(shù)傳入"checked"屬性和"onUpdate:checked"事件實現(xiàn)"v-model"的等同操作.

<script>
import { defineComponent, h } from "vue";
import ASwitch from "../components/ASwitch.vue";
export default defineComponent({
  components: { ASwitch },

  data() {
    return { checked: false };
  },

  render() {
    return h(ASwitch, {
      checked: this.checked,
      ["onUpdate:checked"]: (checked) => {
        this.checked = checked;
      },
    });
  },
});
</script>

使用場景

實際開發(fā)中很多第三方組件都設(shè)計了可以接收"VNode"的"屬性", 比如"ant-design-vue"的"Table"組件的"columns"屬性中的"customRender"屬性, 可以通過傳入"VNode"實現(xiàn)樣式自定義:

{
    title: '狀態(tài)',
    customRender({ record }: any) {
    if (1 === record.state) {
      return h(Tag, { color: 'success' }, () => `開啟`);
    } else {
      return h(Tag, { color: 'error' }, () => `關(guān)閉`);
    }
  },
},

代碼中通過"h"渲染了"Tag"組件,效果如下: