Render函数（3）：函数式组件、JSX初接触

写在前面：说实话视频学习的方式真的不适合我...之前在B站和慕课上的Vue视频学的组件啊Vuex啊router真的只是囫囵吞枣啊，会用是会用，但是呆的很。
还是纸质适合我，应该这一周就能复习完Vuex和router了，冲！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="Vue.2.6.10.js"></script>
</head>
<body>
    <div id="app1">
        <smart-item :data='data'></smart-item>
        <button @click='change("img")'>切换至图片组件</button>
        <button @click='change("video")'>切换至视频组件</button>
        <button @click='change("text")'>切换至文字组件</button>
    </div>
</body>
<script>
    //vue提供了一个functional的布尔值选项（注册组件时），若设置为true，则会使得组件无状态、无实例，即没有data、this上下文，这样使用render函数
    //返回的虚拟节点可以更容易渲染，因为函数化的组件只是一个函数（即functional为true）
    //图片组件选项
    var imgComp = {
        props:['data'],
        render(h) {
            return createElement('div',[
                createElement('p','图片组件'),
                createElement('img',{
                    attrs:{
                        src:this.data.url
                    }
                })
            ]);
        },
    };

    var videoComp = {
        props:['data'],
        render:function(createElement){
            return createElement('div',[
                createElement('p','视频组件'),
                createElement('video',{
                    attrs:{
                        src:this.data.url,
                        controls:'controls',
                        autoplay:'autoplay'
                    }
                })
            ]);
        }
    };

    var textComp = {
        props:['data'],
        render:function(createElement){
            return createElement('div',[
                createElement('p','文本组件'),
                createElement('p',this.data.text)
            ]);
        }
    };

    Vue.component('smart-item',{
        //函数化组件
        functional:true,
        render:function(createElement,context){//使用函数化组件时，render函数提供了第二个参数context
        //来提供临时上下文，组件中需要的data、props、slots、children、parent都是通过它来传递的
        //this.level---context.props.level, this.$slots.default---context.children
            function getCom(){
                var data = context.props.data;
                if(data.type === 'img') return imgComp;
                if(data.type === 'video') return videoComp;
                return textComp;
            };
            return createElement(
                getCom(),
                {
                    props:{
                        data:context.props.data//从组件smart-item传向上面getCom()返回的组件             
                    }
                },
                context.children//父组件插槽的默认内容
            )
        },
        props:{
            data:{
                type:Object,
                required:true
            }
        }
    });

    var app1 = new Vue({
       el:"#app1",
       data:{
           data:{}//默认为对象嗷
       },
       methods: {
           change:function(type){
               if(type === 'img'){
                   this.data = {
                       type:'img',
                       url:''
                   }
               }else if(type === 'video'){
                   this.data = {
                       type:'video',
                       url:''
                   }
               }else if(type === 'text'){
                   this.data = {
                       type:'text',
                       text:'文本组件，冲！'
                   }
               }
           }
       },
       created() {
           this.change('text');
       },
    });


    //jsx是什么？它是一种看起来像html，但实际上是js的语法扩展
    // // createElement&jsx：
    // render(createElement){
    //     return createElement('div',{
    //         props:{
    //             text:'some text'
    //         },
    //         attrs:{
    //             id:'myDiv'
    //         },
    //         domProps:{
    //             innerHTML:'content'
    //         },
    //         on:{
    //             change:this.change
    //         },
    //         nativeOn:{
    //             click:this.clickHandler
    //         },
    //         class:{
    //             show:true,
    //             on:false
    //         },
    //         style:{
    //             color:"#fff",
    //             background:'#f50'
    //         },
    //         key:'key',
    //         ref:'element',
    //         slot:'slot'
    //     })
    // };//改写为jsx如下：
    // render(h) {
    //     return {
    //         <div 
    //             id='myDiv'
    //             domPropsInnerHTML='content'
    //             onChange = {this.change}
    //             class={{ show:true, on:false }}
    //             style = {{ ... }}

    //     }
    // }
</script>
</html>