vue中使用render函数

最新推荐文章于 2025-04-14 15:15:47 发布

那颗星好美

最新推荐文章于 2025-04-14 15:15:47 发布

阅读量595

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42767631/article/details/111183228

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

这篇博客探讨了在Vue中如何使用render函数来创建组件，类似于React的render方法。展示了两种不同的写法：一种是直接使用jsx语法，另一种是通过createElement函数。文章详细解释了这两种方式的实现细节，帮助读者理解Vue中的render函数如何工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用render函数来写html

- vue组件中使用 render 写法，像 react 的 render 写法一样
- - 第一种
  - 第二种

vue组件中使用 render 写法，像 react 的 render 写法一样

第一种

// 使用 react 写法
render () {
	let { v, handleUp } = this;
	return (
		<ul>
			<li class="txt-center" key={ v.id } on-click={this.handleUp.bind(this, v)} >
                <img src={ v.pic } alt=""/>
                <p class="jd-text-color Ft-S22">{v.name}</p>
             </li>
		</ul>
	)
}

第二种

// 使用 createElement 方式写法
render (h) {
	let { v, handleUp } = this;
	return (
		h('div', { class: 'txt-center' }, [
           h("img", { attrs: { src: v.pic, alt: ''}, on: { click: () => handleUp(v) } }),
           h("p", { class: 'jd-text-color Ft-S22' }, v.name)
       ])	
	)
}