9.1 render函数初步了解
template下只允许有一个子节点
实现一个属性level值（1-3）的更改对应组件中的标题从h1-h3更改的案例：
使用vue组件方法
<div id="app">
<my-count :level="level">我是内容</my-count>
</div>
<template id="tem">
<div>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-if="level === 2">
<slot></slot>
</h2>
<h3 v-if="level === 3">
<slot></slot>
</h3>
</div>
</template>
<script>
Vue.component('my-count',{
template: '#tem',
props: ['level']
})
var app = new Vue({
el: '#app',
data: {
level: 1
}
})
</script>
使用render函数的方法代替template
<div id="app">
<my-count :level="level">我是内容</my-count>
</div>
<script>
//使用组件中的render方法
Vue.component('my-count',{
render: function(createElement){
return createElement('h'+this.level,this.$slots.default)
},
props:['level']
})
var app = new Vue({
el: '#app',
data: {
level: 1
}
})
</script>
9.2 render函数中的createElement参数，以及返回值createElement函数的第一个参数
在render函数的方法中，参数必须是createElement,createElement的类型是function
createElement函数的第一个参数可以是 String | Object | Function
Vue.component('child',{
// ----第一个参数必选
//String--html标签
//Object---一个含有数据选项的对象
//FUnction---方法返回含有数据选项的对象
render: function (createElement) {
alert(typeof createElement)
// return createElement('h1')
// return createElement({
// template:'<div>锄禾日当午</div>'
// })
var domFun = function () {
return {
template:'<div>锄禾日当午</div>'
}
}
return createElement(domFun());
}
});
9.3 render函数中的返回值函数createElement的第二个参数
Vue.component('my-count',{
// ----第二个参数可选,第二个参数是数据对象----只能是Object
render: function (createElement) {
return createElement({
template: '<div>hello world!</div>'
},{
style:{
color: 'red',
fontSize: '16px'
},
class:{
far: false,
bar: true
},
//正常的html特性
attrs:{
id: '#z',
title: 'linlin'
},
//用来写原生的Dom属性
domProps:{
innerHTML:'<span>aaaaaa</span>'
}
})
}
})
9.3 render函数中的返回值函数createElement的第三个参数
第三个参数也是可选===String | Array—作为我们构建函数的子节点来使用 的
Vue.component('my-count',{
// ----第三个参数是可选的，可以是 String | Array---代表子节点
render: function (createElement) {
return createElement('div',[
createElement('h1','我是标题'),
createElement('h2','我是标题')
])
}
})
9.4 this.$slots在render函数中的应用
第三个 参数存的就是VNODE
createElement(‘header’,header), 返回的就是VNODE
var header = this.$slots.header; //–这返回的内容就是含有VNODE的数组
<div id="app">
<my-count>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<span slot="footer">我是文章的最后一句</span>
<h1 slot="header">我是标题</h1>
</my-count>
</div>
<script>
//使用组件中的render方法
Vue.component('my-count',{
render: function(createElement){
var header = this.$slots.header;
var footer = this.$slots.footer;
var main = this.$slots.default;
return createElement('div',[
createElement('header',header),
createElement('main',main),
createElement('footer',footer)
])
}
})
通过上面的代码能将h1放在第一行显示，然后是两个p里面的内容，最后显示footer，显示效果如下
9.5 在render函数中使用props传递数据
<div id="app">
<button @click="switchShow">点击切换美女</button>
<my-count :show="show"></my-count>
</div>
<script>
Vue.component('my-count',{
render: function(createElement){
let imgSrc = '';
if(this.show === true){
imgSrc = '1.jpg'
}else{
imgSrc = '2.jpeg'
}
return createElement('img',{
attrs:{
src: imgSrc
},
style:{
width: '340px',
height: '500px'
}
})
},
props: ['show']
});
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
switchShow: function(){
this.show = !this.show
}
}
})
</script>
9.6 vmodel在render函数中的使用
<div id="app">
<!-- <my-count :name="name" @input="showName"></my-count> <br> -->
<my-count :name="name" v-model="name"></my-count> <br>
{{name}}
</div>
<script>
Vue.component('my-count',{
props: ['name'],
render: function(createElement){
let _this =this;//指的就是当前的VUE实例
return createElement('input',{
domProps: {
value: _this.name
},
on: {
input: function(event){
var a = this;
//此处的this指的是什么？指的就是window
_this.$emit('input',event.target.value)
}
}
})
}
});
var app = new Vue({
el: '#app',
data: {
name: 'jack'
},
methods: {
showName: function(value){
return this.name = value;
}
}
})
</script>
9.6 作用域插槽在render函数中的使用
<div id="app">
<my-count>
<template slot-scope="prop">
{{prop.text}}
{{prop.msg}}
</template>
</my-count>
</div>
<script>
Vue.component('my-count',{
props: ['name'],
render: function(createElement){
//就相当于<div><slot text="我是组件传递过来的数据" msg="scopetext"></slot></div>
return createElement('div',this.$scopedSlots.default({
text: '我是子组件传递过来的数据',
msg: 'scopetext'
}))
}
});
9.7 函数化组件的应用
使用context的转变——
对于上面案例代码
// this.text----context.props.text
//this.$slots.default-----context.children
<div id="app">
<my-count value="haha"></my-count>
</div>
<script>
Vue.component('my-count',{
props: ['value'],
functional: true,//表示该组件无状态，无实例（不能用this）
render: function(createElement,context){
return createElement('button',{
on: {
click: function(){
console.log(context.props.value)
}
}
},'点击我')
}
});
var app = new Vu
补充：createElement可以使用h来缩写
如：
render: h => h(App)
//是下面内容的缩写：
render: function (createElement) {
return createElement(App);
}
进一步缩写为(ES6 语法)：
render (createElement) {
return createElement(App);
}
再进一步缩写为：
render (h){
return h(App);
}
按照 ES6 箭头函数的写法，就得到了：
render: h => h(App);
