标签：vue return render number renderFunc 使用 组件 JSX event
在祖父组件render-page.vue中，renderFunc函数由 vue 中的函数式组件 —> JSX实现
函数式组件
methods: {
renderFunc(h, name) {
return h('i', {
style: {
color: 'red'
}
}, name)
}
}
jsx
methods: {
renderFunc(h, name) {
return (
<i on-click={this.handleClick} style={{color: 'pink'}}>{name}</i>
)
},
// 给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-
<CountTo
on-on-animation-end={this.handleEnd}
endVal={number}
on-click={this.handleClick}
style={{color: 'pink', fontSize: '40px'}}>{number}</CountTo>
下面是全部代码
父组件render-page.vue
<template>
<div>
<list :list="list" :render="renderFunc"></list>
</div>
</template>
<script>
import List from '_c/ulList'
import CountTo from '_c/count-to'
export default {
data() {
return {
list: [
{number: 100 },
{number: 33 }
]
}
},
components: {
List
},
methods: {
renderFunc(h, number) {
return (
<CountTo
on-on-animation-end={this.handleEnd}
endVal={number}
nativeOn-click={this.handleClick}
style={{color: 'pink', fontSize: '40px'}}>{number}</CountTo>
)
},
handleClick(event) {
console.log(event)
},
handleEnd () {
console.log('end!')
}
}
}
</script>
子组件 ulList.vue
<template>
<div>
<ul>
<li @mousemove="handleMove" v-for="(item, index) in list" :key="`item_${index}`">
<span v-if="!render">
{{item.number}}
</span>
<render-dom v-else :render-func="render" :number="item.number"></render-dom>
</li>
</ul>
</div>
</template>
<script>
import RenderDom from '_c/render-dom'
export default {
name: 'list',
components: {
RenderDom
},
props: {
list: {
type: Array,
default: () => []
},
render: {
type: Function,
default: () => {}
}
},
methods: {
handleMove(event) {
// 去除鼠标默认事件，例如双击默认选中
event.preventDefault()
}
}
}
</script>
函数式组件 render-dom.js
export default {
functional: true,
props: {
number: Number,
renderFunc: Function
},
render: (h, ctx) => {
return ctx.props.renderFunc(h, ctx.props.number)
}
}
标签：vue,return,render,number,renderFunc,使用,组件,JSX,event 来源： https://blog.csdn.net/sophycentre/article/details/97618543
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。