Vue2 自定义组件

目录结构

-- components

--- VTable.vue

-- index.js

main.js

封装公共组件 VTable.vue

<template>
    <div>
        <table  ref="table" :style="tabsyl">
            <tr v-for="item in lists" :key="item.id">
            </tr>
        </table>
    </div>
</template> 

<script>
  export default  {
     name: 'VTable',
     props: {
       lists: Array,
       tabsyl: String
    },
    data () {
      return {}
    }
  }
</script>

<style lang="scss" scoped>
</style>

index.js 引入组件

import VTable from '@/components/VTable'

export default (Vue) => {
   Vue.component('v-table', Table)  
}

main.js 全局注入

// 注册全局组件
import components from '@/components';

// 全局导入自定义组件
Vue.use(components);