vue 用 h() 函数创建 Vnodes

目录

前言

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

h() 是 hyperscript 的简称------意思是"能生成 HTML (超文本标记语言) 的 JavaScript"。

typescript 复制代码
const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  key: '001', // key
  [
    /* children */
  ]
)

【注意】组件树中的 vnodes 必须是唯一的。

一、h() 函数的基本使用方式

typescript 复制代码
import { h } from 'vue'

// 除了类型必填以外,其他的参数都是可选的
h('div')
h('div', { id: 'foo' })

// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })

// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })

// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })

// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')

// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])

二、h() 函数的进阶使用方式

1、条件渲染

typescript 复制代码
h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])

2、列表渲染

typescript 复制代码
h(
  'ul',
  // 假设'items'是一个具有数组值的 ref
  items.value.map(({ id, text }) => {
    return h('li', { key: id }, text)
  })
)

3、事件

typescript 复制代码
h(
  'button',
  {
    onClick: (event) => {},
    // 对于事件和按键修饰符,可以使用 withModifiers 函数
    onDbclick: withModifiers(() => {}, ['stop'])
  },
  'click me'
)

4、使用插槽

typescript 复制代码
import { h } from 'vue'

const vnode = h(
  'SelfComponent',
  // 默认插槽:
  // <div><slot /></div>
  // <div>{slots.default()}</div>
  h('div', slots.default()),

  // 具名插槽
  // <div><slot name="footer" :text="message" /></div>
  // <div>{slots.footer({ text: props.message })}</div>
  h(
    'div',
    slots.footer({
      text: props.message
    })
  )
)

【参考文章】
vue 官网之"渲染函数 & JSX"

相关推荐
有梦想的刺儿19 分钟前
webWorker基本用法
前端·javascript·vue.js
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家3 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙3 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds4 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果4 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长4 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai5 小时前
uniapp
前端·javascript·vue.js·uni-app