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)
