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

 0 0条评论

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

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,更详细的可以参考官网的说明

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客