如何从vueJS表中制作可重用组件？

Question

我是vueJS的新手，我想使我的数据表可重用。我想动态呈现表，例如添加列名。不太确定如何启动它。我当时正在考虑将数据列放到我的道具中，以便以后可以在刀片上调用它。那是对的吗？

LogsTable.vue

<template>
    <table id="user_log_list" class="table table-stripped table-bordered table-wordbreak">
    </table>
</template>

<script>
    export default {
        name: 'tableLogs',
        props: ['logs'],
        data() {
            return {
                columns: [{
                    title: 'Date'
                }, {
                    title: 'User'
                }, {
                    title: 'Role'
                }, {
                    title: 'Description'
                }],
                rows: [],
                dt_handle: null
            }
        },
        methods: {
            formatDate: function(local_created_at) {
                let date = new Date(local_created_at);
                let day = date.getDate();
                let month = date.getMonth() + 1; 
                let year = date.getFullYear();
                let hours = date.getHours();
                let minutes = date.getMinutes();
                let meridian = hours >= 12 ? 'PM' : 'AM';

                hours = hours % 12;
                hours = hours ? hours : 12; 
                minutes = minutes < 10 ? '0'+minutes : minutes;

                let time = hours + ':' + minutes + ' ' + meridian;

                if (day < 10) {
                  day = '0' + day;
                } 
                else if (month < 10) {
                  month = '0' + month;
                } 

                return date = day + '/' + month + '/' + year + ' ' + time;
            }
        },
        watch: {
            logs(value) {
                let table = this;
                table.rows = [];

                value.forEach(function(item) {                 
                    let row = [];                   

                    if(item.get_user) {
                        let role = item.get_user.user_type;
                        row.push(table.formatDate(item.local_created_at));
                        row.push(item.get_user.full_name);
                        row.push((role.charAt(0).toUpperCase() + role.slice(1)).replace('_', ' '));
                        row.push(item.description);
                    }

                    table.rows.push(row);
                });

                table.dt_handle.clear();
                table.dt_handle.rows.add(table.rows);
                table.dt_handle.draw();
            }
        },
        mounted() {
            $.fn.dataTable.ext.errMode = 'none';
            $(this.$el).on('error.dt', function(e, settings, techNote, message) {
               console.log( 'An error has been reported by DataTables: ', message);
            })
            let table = this;    
            table.dt_handle = $(this.$el).DataTable({
                columns: table.columns,
                data: table.rows,
                searching: true,
                paging: true,
                info: true
            });
        }
    }
</script>

logs.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import moment from 'moment'

Vue.use(VueAxios, axios)

Vue.component('data-table', require('../../components/LogsTable.vue').default);

new Vue({
    el: '#table-logs',
    data: {
        logs: []
    },
    computed: {
        showLogs: function() {
            return this.logs
        }
    },
    mounted() {
        let tbl = this;
        axios.get('/admin/get-logs')
            .then(response => tbl.logs = response.data);
    }
});

logs.blade.php

@extends('admin_main') 

@section('title') 
User Activity 
@endsection 

@section('body')
<h2>User Activity</h2>
<div id="table-logs">
    <data-table :logs="showLogs"></data-table>
</div>
@endsection 

@section('scripts') 
{!! HTML::script('js/core/dataTables.bootstrap.js') !!} 
{!! HTML::script('js/admin/logs.js') !!}
@endsection