vue基础（9）--render

import Vue from 'vue'
const component = {
    name:'comp',
    props:['props1'],
    /*template:`<div>
            <div :style="style">
                  <slot></slot>
             </div>`,*/
    render(createElement){            //虚拟dom,创建一个vueload，与html进行对比，判断是否更新。高性能原理
        return createElement('div',{
            style:this.style,
            on:{
                click:()=>{this.$emit('click')}
            },
            
        },[
            this.$slots.default,
            this.props1
        )
    },
    data(){        return {
            style:{
                width:'200px',
                height:'200px',
                border:'1px solid #aaa'
            }
        }
    },
}new Vue({
    el:'#root',
    provide(){                                  //跨层*级*组件通讯，注：默认不是react的
        const data={}
        Object.defineProperty(data,'value',{
            get:()=>this.value,                  //变为响应式
            enumerable:true                       //变为响应式

        }),
        return {
          yeye:this,                //非响应式
          data                      //变为响应式
        }
    },
    components:{
       CompOne:component
    },    
    propsData:'xxx ',                           //用prop传入失败
    data:{
        return {
            value:"123"
        }
    },
    /*template:`<div>
            <comp-one ref="comp">
                <span ref="span">{{value}}</content>
            </comp-one>
        </div>`,*/
    render(createElement){
         return createElement(
            'comp-one',
            {
                ref:'comp',
                props:{
                    props1: this.value
                },
                on:{
                    click:this.handleClick
                },
                nativeOn:{                click:this.handleClick
              }
            },[            createElement('span',{
                ref:'span',
            },this.value)
        ])
    },
    methods:{
        handleClick(){
            conslole.log('click')
        }
    }
})