vue h 渲染函数

(一)、h(c1, c2, c3) 参数说明:(详细参数看最后说明)

                c1: 标签名 / 组件名(例如antd组件)

                c2: 子级[] / 属性{}, 组件的属性用props, 其他的,如类名'class',样式'style'

                c3: 文本(如果是有子级的话,则文本放在子级的第一个参数)

(二)、使用

1、可直接传入标签,前提是只能有一个父级,变量使用{}引入,在一些特殊情况不能用,例如要加入点击事件@click

            h => {
	            return (
	             	<div>
				      <div>点击这里<a href={that.downloadSrc+'downExe/down.exe'} target='_blank' download="down.exe">执行升级</a>,升级后请刷新页面。</div> 
			          <div>子节点</div>
			        </div>
	                   )
 		        },

2、层层创建节点的形式,可使用 antd 组件

    // 模板
    <div>
        当数据完全生成后,可下载,
        <a-button type="link" @click="test">去下载</a-button>
    </div>         


    // h 渲染
    
      h => {
		return h( 'div', [
		   '当数据完全生成后,可下载,',
		    h('a-button', {
		       props: {
		         type: 'link'
		       },
		       on: {
		         click: this.test
		       }
		      },
		      '去下载'
		     )
		   ]
		  )
       }

(三)、详细说明参数

{
  // 与 `v-bind:class` 的 API 相同,
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同,
  // 接受一个字符串、对象,或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    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',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

 

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值