Vue-渲染函数render-createElement

1. 什么是渲染函数？

• 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。
• 该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
  //---createElement(VNode) 方法通过指定名称创建一个元素

2. 代码实例演示

<div id="app">
    <test>
        <!--默认插槽、无名插槽-->
        <p>测试在render渲染函数中插槽的使用</p>
        <template v-slot:header>
            <p>具名插槽的使用</p>
        </template>
        <template v-slot:footer>
            <p>具名插槽</p>
            <p>具名插槽</p>
        </template>
    </test>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("test",{
        render:function(createElement){// --- render函数定义模板 ***
            return createElement("div",{// --- 3个参数  （标签，样式，内容）
                style:{
                    width:"100%",
                    height:"200px",
                    border:"1px solid #666"
                }
            },[
                this.msg,
                this.$slots.default,//默认插槽 --- 无名插槽
                this.$slots.footer,// --- 具名插槽
                createElement("div",this.$slots.header) //子组件  //---第一个参数：指定**放入位置 ， 第二个参数需要写在template里面
            ])
        },data:function(){
            return {
                msg:"测试render函数"
            }
        }
    })
    var vm = new Vue({
//              el:"#app",//不要.$mount("#app") 或者这样子也可以
    }).$mount("#app");
</script>

3.代码效果

image.png