Vue3에서 h 함수를 사용하는 방법

소개

• 우리 모두 알고 있듯이 vue 내부에 구축된 것은 실제로 가상 DOM이고, 가상 DOM은 가상 노드에 의해 생성됩니다. 실제로 가상 노드는 js 객체입니다.

• 사실, vue에 작성한 템플릿이며 최종적으로 렌더링 함수를 통해 해당 VNode가 생성됩니다. h 함수는 VNode를 생성하는 데 사용되는 함수입니다.

• 는 문자열입니다. 필수입니다.

이 문자열은 html 태그 이름, 구성 요소, 비동기 구성 요소 또는 함수 구성 요소일 수 있습니다.

두 번째 매개 변수

는 개체입니다. , 속성, 소품 및 이벤트에 해당하는 선택적

• 객체

• 세 번째 매개변수

는 문자열, 배열 또는 객체일 수 있습니다.

• 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 함수에 도입하면 Rendered

<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>

insert 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 code><img src="https://img.php.cn/upload/article/000/887/227/168390097235320.png" alt="Vue3에서 h 함수를 사용하는 방법"><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>

최종 렌더링은 다음과 같습니다

위 내용은 Vue3에서 h 함수를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!