关于render函数的总结

一般情况下封装一个导航组件的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <button @click='exchange_nevigation'>点击切换</button>
    <v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/x-template" id='template1'>
  <div>
      <h1 v-if="level===1" :title='title'>
          <a :href="'#'+title">
              <slot></slot>
          </a>
      </h1>
      <h2 v-if='level===2'>
          <a :href="'#'+title">
             <slot></slot>
          </a>
      </h2>
      <h3 v-if='level===3'>
        <a :href="'#'+title">
           <slot></slot>
        </a>
    </h3>
    <h4 v-if='level===4'>
        <a :href="'#'+title">
           <slot></slot>
        </a>
    </h4>
  </div>
</script>
<script>
    Vue.component('v-anchor',{
        template:"#template1",
        props: {
            level:{
                type:Number,
                required:true
            },
            title:{
                type:String,
                default:""
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
           title:'一级导航',
           msg:"一级导航",
           level:1
        },
        methods:{
            exchange_nevigation:function(){
                var arr=['一','二','三','四'];
                if(this.level===4){this.level=1;
                this.title=arr[0]+'级导航'}else{
                    this.title=arr[this.level]+'级导航';
                    this.level+=1
                }
            }
        }
    })
</script>
</body>
</html>

 使用render函数的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <button @click='exchange_nevigation'>点击切换</button>
    <v-anchor :title="title" :level='level'>{{title}}</v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    Vue.component('v-anchor',{
       render: function (createElement) {
           return createElement(
               'h'+this.level,
               [
                   createElement(
                       'a',{
                           domProps:{
                               href:'#'+this.title
                           }
                       },
                       this.$slots.default
                   )
               ]
           )
       },
        props: {
            level:{
                type:Number,
                required:true
            },
            title:{
                type:String,
                default:""
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
           title:'一级导航',
           msg:"一级导航",
           level:1
        },
        methods:{
            exchange_nevigation:function(){
                var arr=['一','二','三','四'];
                if(this.level===4){this.level=1;
                this.title=arr[0]+'级导航'}else{
                    this.title=arr[this.level]+'级导航';
                    this.level+=1
                }
            }
        }
    })
</script>
</body>
</html>

同上，实现了同样的效果

关于render函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" v-cloak>
    <v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    Vue.component('v-anchor',{
       render: function (createElement) {
           return createElement(
                //第一个参数是标签，必须填写，形式{String|Object|Function}
               'div',
                //第二个参数是对应属性的数据对象可以选填
               {style:{
                   height:"100px",
                   width:"100px",
                   border:"1px solid black",
                   background:'yellow'
               }},
               //子节点,可选填
               [createElement('h1',{
                  domProps:{
                      innerHTML:'测试'
                  },
                  style:{
                      color:'red'
                  }
               })]
           )
       }
    })
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>
</body>
</html>

1.render函数的内容必须return出来

2.它包括三个参数

  2-1.第一个参数是标签，可以是函数或者字符串或者对象的形式产生

  2-2.第二个参数是该标签的数据对象，也可以使用template

3.第三个参数使它的子节点，可以选填，写法和父节点一样

关于render的第二个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .a1{
        color:red
    }
</style>
<body>
<div id="app" v-cloak>
    <v-anchor></v-anchor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
    Vue.component('v-anchor',{
       render: function (createElement) {
           return createElement(
                //第一个参数是标签，必须填写，形式{String|Object|Function}
               'h1',
                //第二个参数是对应属性的数据对象可以选填
               {
                   //和v-bind:class一样
                   'class':{
                       a1:true
                   },
                   //和v-bind:style一样
                   style:{
                      fontSize:'100px',
                      textShadow:'2px 2px 2px black',
                      textAlign:'center'
                   },
                   //正常的HTML特性
                   attrs:{
                       id:"my_h1",
                       title:"我是render生成"
                   },
                   //自定义事件监听
                   on:{
                       click:this.popup
                   },
                   //自定义指令
                   directives:[

                   ]
                   //作用域slot

               },
               //子节点,可选填
               [createElement('p',{
                   //DOM属性
                  domProps:{
                      innerHTML:'测试'
                  },
                  style:{
                      color:'red'
                  }
               })]
           )
       },
        methods:{
           popup:function(){
               alert('测试')
           }
        }
    });
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>
</body>
</html>