网站收缩引擎入口,网站建设规划设计报告,网站三站合一,广西建设部投诉网站1.组件的本质
组件就是一组 DOM 元素的封装#xff0c;本质就是一个对象
(mounted函数中打印一下组件即可看到打印的是一个对象)
如何利用javascript对象来描述一个组件#xff1f;
const MyComponent {render() {return {tag: div,props: {onClick: () alert(hell…1.组件的本质
组件就是一组 DOM 元素的封装本质就是一个对象
(mounted函数中打印一下组件即可看到打印的是一个对象)
如何利用javascript对象来描述一个组件
const MyComponent {render() {return {tag: div,props: {onClick: () alert(hello)},children: click Me}}
}const vnode {tag: MyComponent
}
如何修改渲染器的内容渲染函数时写的只是针对虚拟节点不是针对组件即传入一个对象
2.手写组件渲染函数
虚拟节点为字符串时手写Vue渲染器render函数-CSDN博客
重点和普通字符串tag不同的时判断vnode.tag是一个组件时通过组件的render函数获取组件对象的虚拟节点 div idapp/divscript// 手写render函数组件对象渲染到页面/*重点:使用vnode.tag作为创建的dom标签el判断vnode.tag是一个组件时通过组件的render函数获取组件对象的虚拟节点*//*** vnode 虚拟 DOM 对象* container 一个真实 DOM 元素作为挂载点渲染器会把虚拟 DOM 渲染到该挂载点*/function render(vnode, container) {// 通过判断vode的tag为对象则为组件渲染if(typeof vnode.tag string){mount(vnode, container);}else if(typeof vnode.tag object){let comVnode vnode.tag.render();mount(comVnode, container);}else{// ...其他操作}}// tag为字符串时的渲染函数function mount(vnode, container) {// 使用vnode.tag作为创建的dom标签ellet el document.createElement(vnode.tag);// 遍历vnode.props将属性 事件添加到DOM上事件即给元素添加监听事件for (let key in vnode.props) {// 判断如果为事件则将其设置到el中if ((/^(on)/).test(key)) {el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key]);}}// 处理 children(字符串和数组)if (typeof vnode.children string) {el.appendChild(document.createTextNode(vnode.children));} else if (Array.isArray(vnode.children)) { //是数组进行遍历并递归调用render方法vnode.children.forEach(child {render(child, el);});}// 将元素添加到挂载节点container下container.appendChild(el);}// render函数测试const container document.getElementById(app)// 仿组件结构可以通过render方法获取组件的虚拟节点对象数据const MyComponent {render() {return {tag: div,props: {},children: [{tag: p,props: {},children: 我是一个p标签},{tag: button,props: {onClick: () alert(hi vue)},children: 按钮}]}}}const vnode {tag: MyComponent}render(vnode, container)
