1.render函数初步了解
<body>
<div id="app">
<child :level="level">我是一个蜡笔小新！</child>
</div>
<template id="hdom">
<div>
<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>
</div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
Vue.component('child',{
props:['level'],
template:'#hdom'
})
var app = new Vue({
el:'#app',
data:{
level:1
}
})
</script>
</body>
链接：js.jirengu.com/bekebesofu/… template下面只能由一个子节点。所以如果有多个节点，需要用一个
来包裹。 render后的代码： 链接：js.jirengu.com/jeduguxaba/…render函数的第一个参数(必选)
Vue.component('child',{
render:function(createElement){
return createElement(
'h'+this.level,
this.$slots.default
)
}
})
- 在render函数的方法中，参数名必须是createElement不能改变；createElement的类型是function；
- render函数的第一个函数可以是string，object，function
render的第二个函数可选，第二个参数是数据对象----只能是Object{}
render第三个参数，是
Strig或Array，Array用的多。作为我们构建函数的子节点进行使用。
this.$slots在插槽中的应用
这个里的p,p,h3,h5,就是插槽。
在render函数中使用props
- 需求点击按钮切换美女图 js.jirengu.com/bozenocodu/…
