快捷導(dǎo)航

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

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

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

前言

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

render

render是組件的一個(gè)選項(xiàng), 他的返回值會(huì)被作為組件的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)做字符串渲染了,** 并沒(méi)有生成h2標(biāo)簽. 如何正確插入h2標(biāo)簽?zāi)?**

VNode

如果想插入DOM就要用到"VNode", VNode是vue對(duì)頁(yè)面DOM節(jié)點(diǎn)的描述, 其是一個(gè)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個(gè)參數(shù)是"標(biāo)簽名", 第2個(gè)是"屬性", 在這個(gè)例子里可以理解為html的所有屬性, 第3個(gè)是"內(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>

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

渲染組件

"h"還可以渲染"組件", 這一下靈活度就上來(lái)了, 假設(shè)我們有一個(gè)"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個(gè)參數(shù)還支持傳入組件對(duì)象. 效果如下:

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

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

上面不能切換是因?yàn)闆](méi)有像在模板中那樣使用"v-model".

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

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

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

所有的自定義事件, 都可以通過(guò)":on"前綴通過(guò)props傳入. 所以在"h"中可以通過(guò)第2個(gè)參數(shù)傳入"checked"屬性和"onUpdate:checked"事件實(shí)現(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>

使用場(chǎng)景

實(shí)際開發(fā)中很多第三方組件都設(shè)計(jì)了可以接收"VNode"的"屬性", 比如"ant-design-vue"的"Table"組件的"columns"屬性中的"customRender"屬性, 可以通過(guò)傳入"VNode"實(shí)現(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)閉`);
    }
  },
},

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