vue3渲染函数h的简单使用——定义局部组件

vue3渲染函数h的简单使用

基本用法

创建 Vnodes
Vue 提供了一个 h() 函数用于创建 vnodes：

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

在SFC中定义局部组件使用

h函数返回的是 Vnodes，无法直接在template使用，需要用一个组件render接收

示例

vue组件是一个对象，在setup中定义局部组件，基本等于定义一个对象，按照vue组件文件对象的格式来定义。

<template>
  <div>
    <div>count: {{ count }}</div>
    <TextComp msg="hello"></TextComp>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'

const count = ref(0)
const TextComp = {
  props: ['msg'],
  setup(props, context) {
    return () => {
      return h('div', {
        class: 'container',
        onClick: () => {
          console.log('props', props)
        }
      }, [
        props.msg,
        h('button', {
          onClick: () => {
            count.value++
          }
        }, 'increase')
      ])
    }
  }
}

</script>

<style scoped></style>