vue函数组件

原创于 2020-01-16 10:41:47 发布 · 207 阅读

CC 4.0 BY-SA版权

本文深入探讨Vue中的函数组件实现方式，展示如何通过render函数和createElement方法构建组件结构，同时介绍了属性props的使用，如字符串类型定义及默认值设置。通过具体代码示例，读者可以学习到函数组件的基本语法和特性。

vue中的函数组件


<script>
    export default {
        name: 'noData',
        functional: true,
        props: {
            title:{
                type:String,
                default:''
            }
        },
        render(createElement, context) {

            const nodatas = createElement('span', {
                attrs: { class: 'layout-span'}
            }, context.props.title);

            return createElement('div', {
                attrs: { class: 'layout-div' }
            }, [nodatas]);
        }
    }
</script>
<style scoped lang="scss">
// 样式
 
</style>