公司创建网站销售,网站开发知识产权归属,做网站收录,wordpress 阿里大于目录
介绍
参数
使用案例
1.创建虚拟 DOM 元素
2. 组件的动态渲染
3. 创建功能组件
4.渲染动态属性
5. 使用插槽
6. 创建动态标签 介绍
h() 函数用于辅助创建虚拟 DOM 节点#xff0c;它是 hypescript 的简称——能生成 HTML (超文本标记语言) 的 JavaScript#x…目录
介绍
参数
使用案例
1.创建虚拟 DOM 元素
2. 组件的动态渲染
3. 创建功能组件
4.渲染动态属性
5. 使用插槽
6. 创建动态标签 介绍
h() 函数用于辅助创建虚拟 DOM 节点它是 hypescript 的简称——能生成 HTML (超文本标记语言) 的 JavaScript它有另外一个名称叫做 createVnode()。在 Vue 项目中使用 HTML 标签构建页面时最终结果会转化为 vnode而该h()函数直接创建 vnode可以更灵活地构建组件渲染逻辑并提高性能。 参数
type要创建的节点类型可以是 HTML 标签、组件或函数功能组件。props可选包含节点属性的对象作为 prop 传递。children可选子节点可以是字符串、数组或其他 vnode 对象。
1. type HTML标签名如果有type字符串则会被解析为HTML标签。 Component如果type是对象或者函数则会被解析为Vue组件。 异步组件type也可以是一个返回Promise的函数该Promise将被解析到组件。 2. propsProps 是可选参数用于指定节点的属性。 传递 props 时传递一个包含属性名称和值的对象作为 prop。 您也可以将null其作为 props 的值传递。 3. children子节点可以是字符串数组或其他 vnode 对象。 如果子节点是一个数组则数组中的每个元素都将被视为节点的子节点。 如果子节点是一个函数它将在渲染期间被调用并且其返回值将作为子节点。
注意事项
如果没有props那么通常可以将children作为第二个参数传入如果会产生歧义可以将null作为第二个参数传入将children作为第三个参数传
官方完整类型参数
// 完整参数签名
function h(type: string | Component,props?: object | null,children?: Children | Slot | Slots
): VNode// 省略 props
function h(type: string | Component, children?: Children | Slot): VNodetype Children string | number | boolean | VNode | null | Children[]type Slot () Childrentype Slots { [name: string]: Slot } 使用案例
1.创建虚拟 DOM 元素
h函数可以在两个地方使用
render函数选项中setup函数选项中setup本身需要是一个函数类型函数再返回h函数创建的VNode
import { h } from vueexport default {render() {return h(div, { className: app }, [h(h2, { className: title }, I am title),h(p, null, I am content)])}
}
// 或者
import { defineComponent } from vue;
export default defineComponent({name: Jsx,render() {return I am div;},
});
定义一个setup返回渲染函数的函数。
import { h } from vueexport default {setup() {// setup is a function that returns another functionreturn () h(div, { class: app }, [h(h2, { class: title }, I am title),h(p, null, I am content)])}
}
2. 组件的动态渲染
import { ref } from vue;
import ComponentA from ./ComponentA.vue;
import ComponentB from ./ComponentB.vue;const nowComponent ref(ComponentA);function changeComponent() {nowComponent.value nowComponent.value ComponentA ? ComponentB : ComponentA;
}const createComponent () {return h(nowComponent.value ComponentA ? ComponentA : ComponentB);
};
3. 创建功能组件
import { h, defineEmits } from vue;const FunctionalComponent (props, context) {return h(div, null, [h(p, null, props.text),h(button, { onClick: context.emit.bind(context, click) }, click)]);
};const emit defineEmits([click]);function handleClick() {console.log(handleClick);
}
如上所示这是一个典型的函数式组件使用方法包括如何在父子组件中与它们交互。FunctionalComponent 接收 props 和 context 参数并使用 h() 函数构造页面。此外它还通过触发父组件中的事件处理程序context.emit。
4.渲染动态属性 import { ref } from vue;const visible ref(true);function myVisibility() {visible.value !visible.value;}const componentWithProps () {return h(div, { class: { visible: visible.value } }, div);};
如上所示里面的函数根据 h()的值判断 vnode 是否带有class 并在点击按钮时实现动态样式。当然动态 class 只是一个例子实际上里面的各种属性或者子组件都可以动态灵活
5. 使用插槽
import { h } from vue;const SlotComponent (props, context) {return h(div, null, [h(p, null, In slot:),context.slots.default context.slots.default()]);
};
如上所示在引用SlotComponent组件时其内部标签内的内容将作为默认插槽的内容传递给SlotComponent。此外还可以使用context.slots.default()来获取并渲染默认插槽的内容。因此当我们封装一个函数式组件但内部有动态部分时特别适合以这种方式使用插槽。
6. 创建动态标签
import { ref } from vue;const tag ref(div);function changeTag() {tag.value tag.value div ? section : div;
}const createElement () {return h(tag.value, null, dynamic);
};
这种方式避免了使用v-if产生大量冗余代码。
