vue的render函数用法

最新推荐文章于 2024-08-15 16:42:09 发布

forwardMyLife

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量3.5k

点赞数 3

分类专栏： vue 文章标签： vue的render函数用法

本文链接：https://blog.csdn.net/lucky_ly/article/details/102635911

版权

本文介绍了Vue的render函数，包括它的基本用法、createElement参数解析、约束条件、如何在render函数中使用插槽以及函数式组件的概念和特点。通过示例展示了render函数在动态渲染、组件复用和避免模板限制等方面的灵活性。

摘要由CSDN通过智能技术生成

1.render简介

前面我们的组件的模板都是在模板里写的(template),模板最后都会被vue编译成virtual dom（虚拟dom），在某些情况下模板可能不好用，例如需要实现一个动态的文章标题，根据父组件的level属性，动态的渲染成h1~hx标签，用模板写部分代码如下。

<article-header :level="1">Hello world</article-header>
<script type="text/x-template" id="article-header-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>
<script>
	Vue.component('article-header', {
    
  template: '#article-header-template',
  props: {
    
    level: {
    
      type: Number,
      required: true
    }
  }
})
</script>

代码写的很死板，不灵活。这时候使用render函数会变得非常的方便。改写如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		
		<div id="app">
			
			<article-title :level="level">
				hello world
			</title>
		</div>
		
		
		<script>
			
			Vue.component("article-title",
			{
    
				render:function(createElement){
    
					return createElement(
					'h'+this.level,
					{
    
						style:{
    
							color:'red'
						}
					},
					this.$slots.default)
				},
				props:{
    
					level