vue3中的h函数
9374 2022/9/21 Vue3h
介绍
h函数中出现的常见问题警告及解决办法
# h()用法
定义: 返回一个“虚拟节点” ，通常缩写为 VNode: 一个普通对象，其中包含向 Vue 描述它应该在页面上呈现哪种节点的信息，包括对任何子节点的描述。用于手动编写render
# 语法
h('div')
// type + props
// 只传类型 与参数
h('div', {})
// type + omit props + children
// Omit props does NOT support named slots
//只传参数与子节点
h('div', []) // array 多个子
h('div', 'foo') // text 子节点是文本内容
h('div', h('br')) // vnode 子节点是虚拟节点
h(Component, () => {}) // default slot 子节点=传入插槽
//三个参数都穿
// type + props + children
h('div', {}, []) // array
h('div', {}, 'foo') // text
h('div', {}, h('br')) // vnode
h(Component, {}, () => {}) // default slot
h(Component, {}, {}) // named slots
// named slots without props requires explicit `null` to avoid ambiguity
//没有props的命名槽需要显式“null”以避免歧义
h(Component, null, {})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# vue3 h函数中绑定v-model
在props中传入 value绑定变量,传入input绑定事件,不可以用v-model语法糖;(这样写会报警告)
Invalid prop: type check failed for prop "value". Expected String | Array, got Number with value 1.
let lng = ref(0)
h(NInput,{
value:lng.value,// 类似于使用v-bind将data选项中的value变量绑定到input的value属性上
onInput:(val) =>{lng.value=Number(val)}
})
1
2
3
4
5
2
3
4
5
# 警告
``