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

时间 2019-12-01

标签 render 函数组件 jsx 接触繁體版

原文原文链接

写在前面：说实话视频学习的方式真的不适合我...以前在B站和慕课上的Vue视频学的组件啊Vuex啊router真的只是囫囵吞枣啊，会用是会用，可是呆的很。html

仍是纸质适合我，应该这一周就能复习完Vuex和router了，冲！vue

<!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>