【vue】render函数实现组件

模板实现组件

不论全局组件、局部组件还是单文件组件，都是使用模板创建HTML来实现组件。

//index.js
import Vue from "vue";
import App from "./components/app.vue";

const vm = new Vue({
    render:createElement => createElement(App)
}).$mount('#root');

//app.vue
<template>
<div>
    <AchoredHeading v-bind:level="1">建军节</AchoredHeading>
    <AchoredHeading v-bind:level="2">七夕</AchoredHeading>
    <AchoredHeading v-bind:level="3">中秋节</AchoredHeading>
    <AchoredHeading v-bind:level="4">中秋节</AchoredHeading>
    <AchoredHeading v-bind:level="5">国庆节</AchoredHeading>
    <AchoredHeading v-bind:level="6">元旦</AchoredHeading>
</div>
</template>

<script>
import AchoredHeading from "./achoredHeading.vue";
export default {
    components:{
        AchoredHeading
    }       
}
</script>

//achoredHeading.vue
<template>
    <h1 v-if="level===1">
        <slot></slot>
    </h1>
    <h2 v-else-if="level===2">
        <slot></slot>
    </h2>
    <h3 v-else-if="level===3">
        <slot></slot>
    </h3>
    <h4 v-else-if="level===4">
        <slot></slot>
    </h4>
    <h5 v-else-if="level===5">
        <slot></slot>
    </h5>
    <h6 v-else>
        <slot></slot>
    </h6>
</template>

<script>
export default {
    props:{
        level:{
            type:Number,
            required:true
        }
    }
}
</script>

render函数实现组件

来点儿不一样的，使用render函数来实现组件。

//index.js
import Vue from "vue";
import App from "./components/app.vue";

Vue.component("AchoredHeading",{
    render:function(createElement){
        return createElement(
            "h"+this.level,
            this.$slots.default
        )
    },
    props:{
        level:{
            type:Number,
            required:true
        }
    }
})

const vm = new Vue({
    render:createElement => createElement(App)
}).$mount('#root');

//app.vue
<template>
<div>
    <AchoredHeading v-bind:level="1">建军节</AchoredHeading>
    <AchoredHeading v-bind:level="2">七夕</AchoredHeading>
    <AchoredHeading v-bind:level="3">中秋节</AchoredHeading>
    <AchoredHeading v-bind:level="4">中秋节</AchoredHeading>
    <AchoredHeading v-bind:level="5">国庆节</AchoredHeading>
    <AchoredHeading v-bind:level="6">元旦</AchoredHeading>
</div>
</template>

但是，注意哈：慎用箭头函数。