elementui表格自定义格式实现原理？？？

<html>
 
<head>
    <title>学习</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
 
</head>
 
<body>
    <div id="body">
        <child value="2200" :formate="f"></child>
        <child value="2200"></child>
    </div>
</body>
<script>
    Vue.component('child', {
        props: {
            value: {
                type: String
            },
            formate: {
 
            }
 
        },
        template: '<span>{{ showvalue }}</span>',
        data() {
            return {
                showvalue: null
            }
 
        },
        methods: {
            childf() {
                if (this.formate)
                    this.showvalue = this.formate(this.value)
                else
                    this.showvalue = this.value
            },
        },
        created() {
            this.childf();
        }
    })
    new Vue({
        el: "#body",
        data: {
        },
 
        methods: {
            f(v) {
                return v / 100;
            }
        }
    });
</script>
 
</html>