vue用h()函數創(chuàng)建Vnodes的實現

更新時間：2024年01月08日 11:10:32 作者：weixin79893765432...

Vue提供了一個h()函數用于創(chuàng)建vnodes,本文就來介紹一下vue用h()函數創(chuàng)建Vnodes的實現,具有一定的參考價值,感興趣的可以了解一下

前言

Vue 提供了一個 h() 函數用于創(chuàng)建 vnodes。

h() 是 hyperscript 的簡稱——意思是“能生成 HTML (超文本標記語言) 的 JavaScript”。

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

【注意】組件樹中的 vnodes 必須是唯一的。

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

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' } })

// 事件監(jiān)聽器應以 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、條件渲染

h('div', [ok.value ? h('div', 'yes') : h('span', 'no')])

2、列表渲染

h(
  'ul',
  // 假設‘items'是一個具有數組值的 ref
  items.value.map(({ id, text }) => {
    return h('li', { key: id }, text)
  })
)

3、事件

h(
  'button',
  {
    onClick: (event) => {},
    // 對于事件和按鍵修飾符，可以使用 withModifiers 函數
    onDbclick: withModifiers(() => {}, ['stop'])
  },
  'click me'
)

4、使用插槽

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”

到此這篇關于vue用h()函數創(chuàng)建Vnodes的實現的文章就介紹到這了,更多相關vue h()函數創(chuàng)建Vnodes內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: