render: h =＞ h(App)解析

最新推荐文章于 2023-06-04 19:38:34 发布

perception952

最新推荐文章于 2023-06-04 19:38:34 发布

阅读量225

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/perception952/article/details/107931889

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

假设我们要实现根据level的大小设置标题大小这一功能，使用模板组件我们会这样写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id='app'>
<anchoredheading :level="2">Hello world!</anchoredheading>
</div>
</body>
<script type="text/x-template" id="anchored-heading-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 type="text/javascript">
Vue.component('anchoredheading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
var vm = new Vue({
  el: '#app'
})
</script>
</html>

这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>，在要插入锚点元素时还要再次重复。

虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<anchoredheading v-bind:level="4">Hello world!</anchoredheading>
</div> 
<script type="text/javascript">
Vue.component('anchoredheading', {
	render: function (createElement) {
	return createElement(
		'h' + this.level, // tag name 标签名称
	this.$slots.default // 子组件中的阵列
	)
	},
	props: {
		level: {
		type: Number,
	required: true
}
}
})
	new Vue({
		el: "#app"
}) 
</script>
</html>

而render: h => h(App)是ES6语法还原后就是

//createElement就是h,一个形参，没有具体意义，可以随意改变书写
render:(function(createElement){
    return createElement(App);

perception952

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
render: h =＞ h(App)解析

假设我们要实现根据level的大小设置标题大小这一功能，使用模板组件我们会这样写<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><div id=
复制链接

扫一扫