vue中非属性特性非Prop 的Attribute简单实现

通常子组件如果需要父组件传递属性会这样写法：

props: {
    modelValue: String,
    placeholder: {
        type: String,
        default: '请输入内容'，        required: true // 必须传入
    }
},

但是如果父组件想传递给子组件的属性，并不包含在props中呢？

这就是所谓非属性特性，说了白话一点，就是指子组件并没有在props中声明父组件需要传入此属性，而父组件强行给子组件传递属性的行为。

实际操作中，本人封装了一个el-column组件，主要功能就是解析一下时间，非常简单，代码如下：

<template>
    <el-table-column prop="createDatetime" label="创建时间">
        <template #default="{row}">
            {{formatDate(row.createDatetime)}}
        </template>
    </el-table-column>
</template>

<script>
    import moment from 'moment'
    import {
        defineComponent
    } from 'vue'
    export default defineComponent({
    // 转换时间戳
    setup() {
        const formatDate = (date) => {
            if (date)
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
            else
                return ''
        }
        return {
            formatDate
        }
    }

})
</script>

在父组件使用时，有时候会根据此clomun进行排序，sortable设置为custom则是根据用户自定义法方法排序，如果仅仅是sortable，那么element会通过js进行排序，实际项目中，我两种排序都可能会用到，那么此时就可以用到非属性特性了。

以下两种写法，就是典型也是最简单的非属性特性的应用。

<sh-createDatetime sortable="custom"></sh-createDatetime>
<sh-createDatetime sortable></sh-createDatetime>

关于非Prop 的Attribute，更详细的可以参考官网的说明。