vue中使用JSX

在祖父组件render-page.vue中，renderFunc函数由 vue 中的函数式组件 —> JSX实现

函数式组件

methods: {

renderFunc(h, name) {

return h('i', {

style: {

color: 'red'

}

}, name)

}

}

jsx

methods: {

renderFunc(h, name) {

return (

{name}

)

},

// 给i标签加点击事件

handleClick(event) {

console.log(event)

}

}

在组件中引用子组件，给jsx和函数式组件使用功能时，不用驼峰命令的形式，组件是什么名字，引入时就是什么形式，比如

引入 import CountTo from '_c/count-to'

使用时 <CountTo endVal={number} on-click={this.handleClick} style={ {color: 'pink', fontSize: '40px'}}>{number}CountTo>

 

自定义事件和js本身的事件，在事件名前面加 on-

on-on-animation-end={this.handleEnd}

endVal={number}

on-click={this.handleClick}

style={ {color: 'pink', fontSize: '40px'}}>{number}

 

下面是全部代码

父组件render-page.vue

子组件 ulList.vue

函数式组件 render-dom.js

export default {

functional: true,

props: {

number: Number,

renderFunc: Function

},

render: (h, ctx) => {

return ctx.props.renderFunc(h, ctx.props.number)

}

}