render函数的使用
render在element UI中的使用render函数是什么具体参数用法render在element UI中的使用
{prop: 'button',label: '操作',minWidth: '200px',render: (h, params) => {return h('div', [h('el-button', {//给button绑定value属性props: {type: 'primary',size: "small"},// DOM 属性domProps: {innerHTML: '编辑'},//给button绑定样式style: {// width: '30px'},//给button绑定点击事件on: {click: () => {this.editDomain(params.row);}},}),h('el-button', {//给button绑定value属性props: {type: 'danger',size: "small"},// DOM 属性domProps: {innerHTML: '删除'},//给button绑定样式style: {// width: '30px'},//给button绑定点击事件on: {click: () => {this.delField(params.row);}},})])},}
render函数是什么
render 函数作用
render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数
render 函数讲解
render 函数即渲染函数,它是个函数,它的参数也是个函数——即createElement
render 函数的返回值(VNode)
VNode(即:virtual node 虚拟节点),也就是我们要渲染的节点
render 函数的参数(createElement)
render 函数的参数(createElement)
createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数
一个 HTML 标签名、组件选项对象,或者 resolve 了上述任何一种的一个 async 函数,类型:{ String | Object | Function },必填项
一个与模板中 attribute 对应的数据对象,类型:{ Object },可选
子级虚拟节点 ( VNodes ),由 createElement() 构建而成,也可以使用字符串来生成 “文本虚拟节点”,类型:{ String | Array },可选
具体参数用法
/*** render: 渲染函数* @param {Function} createElement* @returns {VNode}*/render: createElement => {return createElement(// 1. 第一个参数,要渲染的标签名称【必需】'div',// 2. 第二个参数,1中渲染的标签的属性【可选】,不使用此参数,用 null 占位{// 与 `v-bind:class` 的 API 相同,// 接受一个字符串、对象或字符串和对象组成的数组'class': {foo: true,bar: false},// 与 `v-bind:style` 的 API 相同,// 接受一个字符串、对象,或对象组成的数组style: {color: 'red',fontSize: '14px'},// 普通的 HTML attributeattrs: {id: 'foo'},// 组件 propprops: {myProp: 'bar'},// DOM propertydomProps: {innerHTML: 'baz'},// 事件监听器在 `on` 内,// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。// 需要在处理函数中手动检查 keyCode。on: {click: this.clickHandler},// 仅用于组件,用于监听原生事件,而不是组件内部使用// `vm.$emit` 触发的事件。nativeOn: {click: this.nativeClickHandler},// 自定义指令。注意,你无法对 `binding` 中的 `oldValue`// 赋值,因为 Vue 已经自动为你进行了同步。directives: [{name: 'my-custom-directive',value: '2',expression: '1 + 1',arg: 'foo',modifiers: {bar: true}}],// 作用域插槽的格式为// { name: props => VNode | Array<VNode> }scopedSlots: {default: props => createElement('span', props.text)},// 如果组件是其它组件的子组件,需为插槽指定名称slot: 'name-of-slot',// 其它特殊顶层 propertykey: 'myKey',ref: 'myRef',// 如果你在渲染函数中给多个元素都应用了相同的 ref 名,// 那么 `$refs.myRef` 会变成一个数组。refInFor: true},// 3. 第三个参数,1中渲染的标签的子元素数组【可选】,不使用此参数,用 null 占位 或不写[createElement('span', null, '友情链接'),createElement('a', {attrs: {href: ''}}, '百度')])}
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的
const h = this.$createElement,这样你就可以去掉 (h) 参数了
render: h => h(App)