render 函数基础 | Slot与scopedSlots使用

什么是render 函数

render 函数需要你将模板定义为 JavaScript 对象，即用js来构建DOM

原理：

1. 通过js对象模型所表达的html结构转换成AST(抽象语法树)用于构建虚拟节点VNode
2. render函数再在这个虚拟节点上渲染数据，完成数据渲染后就添加到html文档中渲染到页面

优点

1. 使模板更接近编译器，并允许你使用完整的 JavaScript 功能，而不是指令提供的子集

注意项：

1. 优先级：render> template > el
2. 所以Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数

createElement 参数

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做createElement。Render函数将createElement的返回值放到了HTML中；createElement这个函数中有3个参数：

1. 第一个参数可以是HTML标签名，组件或者函数都可以（必须的）
2. 第二个参数为数据对象
3. 第三个参数为子节点（字符串或数组）
   

参考官网:(https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0)

下面写几个例子：

1.事件的使用

//template use
<evn list="hahahah"></evn>
//contentTheTemplate
Vue.component('evn', {
            props: ['list'],
            render(h){
            //因为官方有写将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，
            //实际上也是 JSX 所要求的
                let _this = this;
                return h('button', {
                    on:{
                    	//此处如果这样写，会导致页面渲染完直接触发
                    	//并不受click控制
                        // click:_this.alert(_this.list)
                        click: () => {_this.alert(_this.list)}
                    }
                }, [h('p', '大哥快点我呀')])
            }
        })
//a method is call    
     Vue.mixin({
         methods: {
             alert(res){
                 alert(res)
             },
         },
     })

2.插槽的使用

slot

	<c-list cti="[{'tit': '我在这'},{'tit': '不我在这儿'}]">
      <p>12312</p>
    </c-list>
    
	Vue.component('c-list',{
            props: ['cti'],
            render(h) {
            //使用map方法实现v-for效果
            //this.$slot 类型：{[name: string]: ?Array<VNode>}
            //this.$slots.default 为默认插槽
            //也可以定义具名插槽 this.$slots.名称 | 使用 v-slot:名称 插入
                return h('div',[this.cti.map(res=> h('div', res.tit)), this.$slots.default]
                )
            }
        })
        //上式等于
        <div v-for="item in [{'tit': '我在这'},{'tit': '不我在这儿'}]">
        	<div>{{ item.tit }}</div>
        	<slot></slot>
		</div>

结果：

scopedSlots

scopedSlots主要用于子组件的作用域插槽

//接受子组件数据
	<ming>
      <div slot-scope="props">{{ props.text }}</div>
      <template slot="name1" scope="props">
        <span>{{props.text}}</span>
      </template>
    </ming>
	
	Vue.component('ming', {
            render(h){
            //this.$scopedSlots 类型{[name: string]: props => Array<VNode> | undefined}
            //组件向插槽内传递参数 {'text':'caomingrui'}
                return h('div', [this.$scopedSlots.default({
                    text: 'caomingrui'
                }),
                this.$scopedSlots.name1({
                        text:'hello scope'
                    })
				])
            }
        })

结果：

	<rui></rui>
	//定义子组件
	Vue.component ("c-node", {
            render(h){
                return h('div', [
                	//定义向默认操作传值
                    // this.$scopedSlots.default({
                    //     text: '000000000000'
                    // }),
                    this.$scopedSlots.ddg({
                        text: 'caomingrui123'
                    })
                ])
            }
        })
        Vue.component('rui', {
            render(h){
                return h('div',[h('c-node', {
                //接受对应值
                    scopedSlots: {
                        default: props => h('span', props.text)
                    },
                }),
                h('c-node', {
                    scopedSlots: {
                        ddg: props => h('span', props.text)
                    },
                })])
            }
        })
        

结果：