Vue3のh関数の使い方

はじめに

• ご存知のとおり、vue 内に構築されるものは実際には仮想 DOM であり、仮想 DOM は仮想ノードによって生成されます。 js オブジェクト

• 実際、vue で作成したテンプレートは、最終的にレンダリング関数を通じて対応する VNode を生成します

• そして、h 関数は次のようになります。 VNode 関数の生成に使用されます。完全名は createVNode

簡単な使用方法

パラメータ

合計 3 つのパラメータがあります

最初のパラメータ

• は文字列です。必須です

• This文字列には、HTML タグ名、コンポーネント、非同期コンポーネント、または関数コンポーネントを指定できます。

2 番目のパラメータ

• はオブジェクトです (オプション)

• #属性、プロップ、イベントに対応するオブジェクト

##3 番目のパラメーター

#文字列、配列、またはオブジェクトを指定できます

• ##これは VNodes であり、h 関数を使用して作成されます

• #

  <script>
  import { h } from &#39;vue&#39;
  
  export default {
      setup() {
          return () => h("h3", null, "Hello World")
      }
  }
  
  </script>

  の使用
  #レンダリング効果は次のとおりです

もちろん、rener 関数を使用してレンダリングすることもできます

<script>
import { h } from &#39;vue&#39;

export default {
    render() {
        return h("h3", null, "Hello World")
    }
}
</script>

Counter

<script>
import { h } from &#39;vue&#39;

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [
            h("h3", null, "计数器"),
            h("h4", null, `计数${this.counter}`),
            h("button", { onClick: () => this.counter++ },"点一下")
        ])
    }
}
</script>

次のようにレンダリングされます

高度な使用

関数コンポーネント

最初にコンポーネントを作成しましょう

HelloWorld.vue

<script setup lang="ts">
import { ref } from &#39;vue&#39;;

const param = ref("Hello World") 
</script>

<template>
    <h3>{{ param }}</h3>
</template>

<style scoped lang="less"></style>

次に、このコンポーネントを h 関数に導入すると、レンダリングされます

<script>
import { h } from &#39;vue&#39;

import HelloWorld from &#39;./HelloWorld.vue&#39;

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [h(HelloWorld)])
    }
}
</script>

Slot

h 関数はスロットもサポートしています。HelloWorld コンポーネントをスロット コンポーネントに変更します。

HelloWorld.vue

<script setup lang="ts">
import { ref } from &#39;vue&#39;;

const param = ref("Hello World") 
</script>

<template>
    <h3>{{ param }}</h3>
    <slot></slot>
</template>

<style scoped lang="less"></style>

index .ts

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">&lt;script&gt; import { h } from &amp;#39;vue&amp;#39; import HelloWorld from &amp;#39;./HelloWorld.vue&amp;#39; export default { data() { return { counter: 0 } }, render() { return h(&quot;div&quot;, null, [h(HelloWorld, {}, [h(&quot;div&quot;, null, &quot;Hello Slot&quot;)])]) } } &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>最終的なレンダリングは次のとおりです</p> <p><code>

以上がVue3のh関数の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。