首页 > Web开发 > 详细

基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

时间:2019-11-28 18:28:38      阅读:182      评论:0      收藏:0      [点我收藏+]

转载:https://segmentfault.com/a/1190000015970367?utm_source=tag-newest

记录一下 在IView中使用 Rander渲染列时如何调用自己的自定义指令.

 1 h(‘组件名‘, {组件属性(包括vue相关的props)}, [子组件或者子节点或者文本])
 2 {
 3   // 和`v-bind:class`一样的 API
 4   ‘class‘: {
 5     foo: true,
 6     bar: false
 7   },
 8   // 和`v-bind:style`一样的 API
 9   style: {
10     color: ‘red‘,
11     fontSize: ‘14px‘
12   },
13   // 正常的 HTML 特性
14   attrs: {
15     id: ‘foo‘
16   },
17   // 组件 props
18   props: {
19     myProp: ‘bar‘
20   },
21   // DOM 属性
22   domProps: {
23     innerHTML: ‘baz‘
24   },
25   // 事件监听器基于 `on`
26   // 所以不再支持如 `v-on:keyup.enter` 修饰器
27   // 需要手动匹配 keyCode。
28   on: {
29     click: this.clickHandler
30   },
31   // 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件。
32   nativeOn: {
33     click: this.nativeClickHandler
34   },
35   // 自定义指令。注意事项:不能对绑定的旧值设值
36   // Vue 会为您持续追踪
37   directives: [
38     {
39       name: ‘my-custom-directive‘,
40       value: ‘2‘,
41       expression: ‘1 + 1‘,
42       arg: ‘foo‘,
43       modifiers: {
44         bar: true
45       }
46     }
47   ],
48   // Scoped slots in the form of
49   // { name: props => VNode | Array<VNode> }
50   scopedSlots: {
51     default: props => createElement(‘span‘, props.text)
52   },
53   // 如果组件是其他组件的子组件,需为插槽指定名称
54   slot: ‘name-of-slot‘,
55   // 其他特殊顶层属性
56   key: ‘myKey‘,
57   ref: ‘myRef‘
58 }

 

基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

原文:https://www.cnblogs.com/TbKing-blogs/p/11951745.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!